将Bootstrap Glyphicon添加到输入框

作者: 不想吃东西
发布时间: 2024-09-23 02:25:58 (4天前)
转自：

11 条回复

0#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一个仅限CSS的替代方案。我为搜索字段设置了这个以获得类似于Firefox的效果（以及其他一百个应用程序。） </p> <P> <a href="http://jsfiddle.net/chetfarley/WK3Q6/1/" rel="noreferrer"> 这是一个小提琴 </A> 。 </p> <P> 的<strong> HTML </强> </p> <pre> <code> <div class="col-md-4"> <input class="form-control" type="search" /> <span class="glyphicon glyphicon-search"></span> </div> </code> </pre> <P> 的<strong> CSS </强> </p> <pre> <code> .form-control { padding-right: 30px; } .form-control + .glyphicon { position: absolute; right: 0; padding: 8px 27px; } </code> </pre> </DIV>

编辑
1#
回复此人
梦中会飞的鱼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> 您可以使用其Unicode HTML </H2> <P> 因此，要添加用户图标，只需添加即可 <code>  </code> 到了 <code> placeholder </code> 属性，或者你想要的地方。 </p> <P> 你可能想检查一下 <a href="https://glyphicons.bootstrapcheatsheets.com" rel="nofollow noreferrer"> 这个备忘单 </A> 。 </p> <P> 例： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <input type="text" class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial"> <input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial"> <input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial"> </code> </pre> </DIV> </DIV> <P> </p> <BLOCKQUOTE> <P> 不要忘记使用输入法将输入的字体设置为Glyphicon 以下代码： <code> font-family: 'Glyphicons Halflings', Arial </code> ，哪里的<strong> 宋体 </强> 是输入中常规文本的字体。 </p> </BLOCKQUOTE> </DIV>

编辑
2#
回复此人
LOGO | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“false”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> input { border:solid 1px #ddd; } input.search { padding-left:20px; background-repeat: no-repeat; background-position-y: 1px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <input class="search"> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
3#
回复此人
Gassyc加西可 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您应该可以使用现有的引导类和一些自定义样式来完成此操作。 </p> <pre> <code> <form> <div class="input-prepend"> <span class="add-on"> <i class="icon-user"></i> </span> <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;"> </div> </code> </pre> <P> </p> <P> 的<strong> 编辑 </强> 图标通过。引用 <code> icon-user </code> 类。这个答案是在Bootstrap版本2时编写的。您可以在下一页上看到该参考： <a href="http://getbootstrap.com/2.3.2/base-css.html#images" rel="nofollow"> http://getbootstrap.com/2.3.2/base-css.html#images </A> </p> </DIV>

编辑
4#
回复此人
关于贤的记忆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下是我只使用默认引导程序CSS v3.3.1的方法： </p> <pre> <code> <div class="form-group"> <label class="control-label">Start:</label> <div class="input-group"> <input type="text" class="form-control" aria-describedby="start-date"> <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </code> </pre> <P> 这就是它的样子： </p> <P> <img src =“https://i.stack.imgur.com/daN49.jpg”alt =“在此处输入图片说明”/> </p> </DIV>

编辑
5#
回复此人
逆转的风 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你正在使用的<strong> Fontawesome </强> 你可以这样做： </p> <pre> <code> <input type="text" style="font-family:Arial, FontAwesome" placeholder="" /> </code> </pre> <P> 的<strong> 结果 </强> </p> <P> <a href="https://i.stack.imgur.com/YfT3Y.png"> <img src =“https://i.stack.imgur.com/YfT3Y.png”alt =“在此处输入图片说明”/> </A> </p> <P> 完整的unicode列表可以在 <a href="http://fontawesome.io/cheatsheet/"> 完整的Font Awesome 4.6.3图标参考 </A> </p> </DIV>

编辑
6#
回复此人
你抱着孩子@先跑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我对Bootstrap 3.3.5的这个案例也有一个决定： </p> <pre> <code> <div class="col-sm-5"> <label for="date"> <input type="date" placeholder="Date" id="date" class="form-control"> </label> <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i> </div> </code> </pre> <P> 输入时我有这样的事情： <a href="https://i.stack.imgur.com/Z4cLM.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/Z4cLM.png”alt =“在此处输入图片说明”/> </A> </p> </DIV>

编辑
7#
回复此人
小蚊子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您有幸只需要现代浏览器：尝试css transform translate。这不需要包装器，并且可以自定义，以便您可以为输入[type = number]提供更多间距以容纳输入微调器，或将其移动到手柄的左侧。 </p> <pre> <code> @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"); .is-invalid { height: 30px; box-sizing: border-box; } .is-invalid-x { font-size:27px; vertical-align:middle; color: red; top: initial; transform: translateX(-100%); } <h1>Tasty Field Validation Icons using only css transform</h1> <label>I am just a poor boy nobody loves me</label> <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span> </code> </pre> <P> <a href="http://codepen.io/anon/pen/RPRmNq?editors=110" rel="nofollow"> http://codepen.io/anon/pen/RPRmNq?editors=110 </A> </p> </DIV>

编辑
8#
回复此人
红蜻蜓 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是另一种方法，通过使用the来放置glyphicon <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" rel="nofollow noreferrer"> <code> :before </code> </A> CSS中的伪元素。 </p> <H2> <a href="http://jsfiddle.net/rcotrina94/cyCFS/272/" rel="nofollow noreferrer"> 在jsFiddle中工作演示 </A> </H2> <P> 对于这个HTML： </p> <pre class="lang-html prettyprint-override"> <code> <form class="form form-horizontal col-xs-12"> <div class="form-group"> <div class="col-xs-7"> <span class="usericon"> <input class="form-control" id="name" placeholder="Username" /> </span> </div> </div> </form> </code> </pre> <P> 使用这个CSS（ <EM> Bootstrap 3.x和基于Webkit的浏览器兼容 </EM> ） </p> <pre class="lang-css prettyprint-override"> <code> .usericon input { padding-left:25px; } .usericon:before { height: 100%; width: 25px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; position: absolute; content: "\e008"; font-family: 'Glyphicons Halflings'; pointer-events: none; } </code> </pre> <P> 正如@Frizi所说，我们必须补充一下 <code> pointer-events: none; </code> 这样光标不会干扰输入焦点。所有其他CSS规则用于居中和添加适当的间距。 </p> <P> 结果： </p> <P> <img src =“https://i.stack.imgur.com/FdvEm.png”alt =“screenshot”/> </p> </DIV>

编辑
9#
回复此人
扬尘 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一个非引导程序解决方案，通过使用base64 URI编码将glyphicon的图像表示直接嵌入CSS中，可以简化标记。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> input { border:solid 1px #ddd; } input.search { padding-left:20px; background-repeat: no-repeat; background-position-y: 1px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <input class="search"> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论