添加 Bootstrap Glyphicon 在输入字段中

没有下载：

我们搬到了K. Bootstrap 一秒钟，但这是基本概念 CSS 在游戏中自己做。 如..所示

, 你可以用它 CSS, 绝对将图标放在输入元素内。 然后在两侧添加缩进，以便文本不与图标重叠。

所以对于下一个 HTML:

<div class="&lt;b&gt;inner-addon left-addon&lt;/b&gt;">

<i class="glyphicon glyphicon-user"></i>

<input class="form-control" type="text"/>

</div>

您可以使用以下内容 CSS 左右缩小字形：

/* enable absolute positioning */

.inner-addon { 

 position: relative; 

}



/* style icon */

.inner-addon .glyphicon {

 position: absolute;

 padding: 10px;

 pointer-events: none;

}



/* align icon */

.left-addon .glyphicon { left: 0px;}

.right-addon .glyphicon { right: 0px;}



/* add padding */

.left-addon input { padding-left: 30px; }

.right-addon input { padding-right: 30px; }

http://plnkr.co/edit/5D8fv5o5e ... eview
http://embed.plnkr.co/5D8fv5o5egpKpYz509O3/preview

笔记

: 它假设您正在使用技术
http://glyphicons.com/
, 但它同样适合
http://fortawesome.github.io/Font-Awesome/
.

为了 FA 只是替换

.glyphicon

在

.fa

从 Bootstrap:

如何

, 这可以最初实现 Bootstrap 通过

http://getbootstrap.com/css/%2 ... ation
. 这是通过分配IT元素来完成的

.form-group

班级

.has-feedback

, 和类图标

.form-control-feedback

.

最简单的例子可以是这样的：

<div class="form-group &lt;b&gt;has-feedback&lt;/b&gt;">

<label class="control-label">Username</label>

<input class="form-control" placeholder="Username" type="text"/>

<i class="glyphicon glyphicon-user &lt;b&gt;form-control-feedback&lt;/b&gt;"></i>

</div>

凡好

:

包括对各种类型的支持 /基本，水平，内置/

包括支持各种规模的控制 /默认，小，大/

骗子

:

不包括对对齐图标的支持

剩下

边缘

要克服减数，我收集了这一点
https://github.com/twbs/bootstrap/pull/14194
随着支持沿左边缘对齐的图标的更改。 由于它是一个相对较大的变化，它被推迟到了未来的释放，但如果您需要这些功能

今天

, 这是一个简单的实现手册：

刚开启

https://run.plnkr.co/plunks/Zr ... s.css
/还通过底部的堆栈的隐藏片段构建/

*LESS

: 或者，如果你
http://less2css.org/
, 这里
https://run.plnkr.co/plunks/Zr ... .less
然后，您需要做的就是启用类

.has-feedback-left

在任何群体中的课程

.has-feedback

, 将图标对齐左边缘。

由于存在许多可能的配置。 html 对于各种类型的形式，各种规模的控件，各种图标和各种标签显示功能，我创建了一个显示正确集的测试页面。 HTML 对于每个排列以及现场演示。

http://plnkr.co/edit/ZrnnkFR3Y ... eview
http://embed.plnkr.co/ZrnnkFR3Yv9HGQHrRMiW/preview

P.S.

https://coderoad.ru/18838964/
Friezia关于加入

pointer-events: none;

它是
https://github.com/twbs/bootstrap/pull/14104

没有找到他们正在寻找的东西

? 尝试回答这些类似的问题：



添加 CSS 用于级别在反馈图标的左边缘

.has-feedback .form-control {

 padding-right: 34px;

}

.has-feedback .form-control.input-sm,

.has-feedback.form-group-sm .form-control {

 padding-right: 30px;

}

.has-feedback .form-control.input-lg,

.has-feedback.form-group-lg .form-control {

 padding-right: 46px;

}

.has-feedback-left .form-control {

 padding-right: 12px;

 padding-left: 34px;

}

.has-feedback-left .form-control.input-sm,

.has-feedback-left.form-group-sm .form-control {

 padding-left: 30px;

}

.has-feedback-left .form-control.input-lg,

.has-feedback-left.form-group-lg .form-control {

 padding-left: 46px;

}

.has-feedback-left .form-control-feedback {

 left: 0;

}

.form-control-feedback {

 line-height: 34px !important;

}

.input-sm + .form-control-feedback,

.form-horizontal .form-group-sm .form-control-feedback {

 width: 30px;

 height: 30px;

 line-height: 30px !important;

}

.input-lg + .form-control-feedback,

.form-horizontal .form-group-lg .form-control-feedback {

 width: 46px;

 height: 46px;

 line-height: 46px !important;

}

.has-feedback label.sr-only ~ .form-control-feedback,

.has-feedback label.sr-only ~ div .form-control-feedback {

 top: 0;

}

@media /min-width: 768px/ {

 .form-inline .inline-feedback {

 position: relative;

 display: inline-block;

 }

 .form-inline .has-feedback .form-control-feedback {

 top: 0;

 }

}

.form-horizontal .has-feedback-left .form-control-feedback {

 left: 15px;

}

官方的

方法。 没有习惯 CSS 不需要 :

<form class="form-inline" role="form">

<div class="form-group has-success has-feedback">

<label class="control-label" for="inputSuccess4"></label>

<input class="form-control" id="inputSuccess4" type="text"/>

<span class="glyphicon glyphicon-user form-control-feedback"></span>

</div>

</form>

DEMO : http://jsfiddle.net/LS2Ek/1/

该演示基于该示例。 Bootstrap docs. 向下滚动到 "With Optional Icons" 这里
http://getbootstrap.com/css/%2 ... ation

这是一个仅限CSS替代品。 我配置了搜索字段以获得效果 Firefox /&/ 百种其他应用程序。/

http://jsfiddle.net/chetfarley/WK3Q6/1/
.

HTML

<div class="col-md-4">

<input class="form-control" type="search">

<span class="glyphicon glyphicon-search"></span>

</input></div>

CSS

.form-control {

 padding-right: 30px;

}



.form-control + .glyphicon {

 position: absolute;

 right: 0;

 padding: 8px 27px;

}

这就是我只使用它的方式 bootstrap 默认 CSS v3.3.1:

<div class="form-group">

<label class="control-label">Start:</label>

<div class="input-group">

<input aria-describedby="start-date" class="form-control" type="text"/>

<span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>

</div>

</div>

这就是它的样子：

这可以使用官方版本的类完成。 bootstrap 3.x, 没有任何习惯 css.

使用

input-group-addon

在内部的入口标签前面

input-group

然后使用任何胶水，这是代码

<form>

<div class="form-group">

<div class="col-xs-5">

<div class="input-group">

<span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>

<input class="form-control left-border-none" name="username" placeholder="User Name" type="text"/>

</div>

</div>

</div>

</form>

这是结果

https://i.stack.imgur.com/k87MV.png
要将其配置更多，请添加几个用户字符串 css 在您自己的文件中 custom.css /如有必要，调整缩进/

.transparent {

 background-color: transparent !important;

 box-shadow: inset 0px 1px 0 rgba/0,0,0,.075/;

 }

 .left-border-none {

 border-left:none !important;

 box-shadow: inset 0px 1px 0 rgba/0,0,0,.075/;

 }

制作背景

input-group-addon

透明并使输入标签等于零的左梯度，输入将具有无缝外观。 这是一个配置的输出

https://i.stack.imgur.com/rZWrf.png
这里
https://jsbin.com/bufoxe/16/edit?html,css,output
jsbin

这将解决自定义问题。 css 与标签重叠，使用时对齐

input-lg

并专注于制表问题。

这 'cheat' 将与班级的副作用一起工作 glyphicon 更改输入控制的字体。

http://jsfiddle.net/WK3Q6/50/

<input class="form-control glyphicon" placeholder="" type="search">

如果要摆脱副作用，可以删除该类 "glyphicon" 并添加下一个 CSS /也许有更好的方法来体验伪元素聚合，我只测试它 Chrome/.

http://jsfiddle.net/WK3Q6/57/

.form-control[type="search"]::-webkit-input-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

.form-control[type="search"]:-moz-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

.form-control[type="search"]::-moz-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

.form-control[type="search"]:-ms-input-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

也许甚至更清洁的解决方案：

http://jsfiddle.net/WK3Q6/59/
CSS

.form-control.glyphicon {

 font-family:inherit;

}

.form-control.glyphicon::-webkit-input-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

.form-control.glyphicon:-moz-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

.form-control.glyphicon::-moz-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

.form-control.glyphicon:-ms-input-placeholder:first-letter {

 font-family:"Glyphicons Halflings";

}

HTML

<input class="form-control glyphicon" placeholder=" search" type="search">

<input class="form-control glyphicon" placeholder=" username" type="text"/>

<input class="form-control glyphicon" placeholder=" password" type="password"/>

</input></input>

这是一个没有初始加载的解决方案 markup 简单，直接嵌入Gilficon的比喻表示 CSS, 使用编码 base64 URI.

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=/;

}

<input class="search"/>

如果您正在使用

Fontawesome

你能行的 :

<input placeholder="" style="font-family:Arial, FontAwesome" type="text">

结果

https://i.stack.imgur.com/YfT3Y.png
全部列表 unicode 你可以找到b。
http://fontawesome.io/cheatsheet/
</input>

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=/;

}

<input class="search"/>

这是另一种方法来通过将GLIFICONE与伪元素放置来执行此操作

:before

在 CSS.

http://jsfiddle.net/rcotrina94/cyCFS/272/
为了这 HTML:

<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">

</input></span>

</div>

</div>

</form>

用它 CSS /

Bootstrap 3.x 和webkit兼容的浏览器

/

.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;

}

据说 @Frizi, 我们必须添加

pointer-events: none;

, 到光标阻止了输入焦点。 所有其他规则 CSS 设计为中心并添加正确的间隔。

结果：

你可以使用它 Unicode HTML

因此，要添加用户图标，只需添加



在属性中

placeholder

或任何地方。

你可能想检查
https://glyphicons.bootstrapcheatsheets.com
.

例子：

<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>

<input class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial" type="text"/>

<input class="form-control" style="font-family: 'Glyphicons Halflings', Arial" type="text" value=" value..."/>

<input class="btn btn-primary" style="font-family: 'Glyphicons Halflings', Arial" type="submit" value=" submit-button"/>

不要忘记安装闪光输入的字体
下一个代码：

font-family: 'Glyphicons Halflings', Arial

, 在哪里

Arial

- 这是输入数据中通常文本的字体。

验证验证 Bootstrap 4.

拿

form-control

并添加

is-valid

到他的班级。 请注意控件如何变为绿色，但更重要的是，注意对照右侧的复选标记图标？ 这就是我们想要的！

例子：

.my-icon {

 padding-right: calc/1.5em + .75rem/;

 background-image: url/'https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg'/;

 background-repeat: no-repeat;

 background-position: center right calc/.375em + .1875rem/;

 background-size: calc/.75em + .375rem/ calc/.75em + .375rem/;

}

<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]

<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]

<link href="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"]https://stackpath.bootstrapcdn ... ot%3B[/url] rel="stylesheet">

<script src="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>]https://stackpath.bootstrapcdn ... gt%3B[/url]

<div class="container">

<div class="col-md-5">

<input class="form-control my-icon" id="date" placeholder="Select..." type="text"/>

</div>

</div>

</link>

在这种情况下，我也有一个解决方案 Bootstrap 3.3.5:

<div class="col-sm-5">

<label for="date">

<input class="form-control" id="date" placeholder="Date" type="date"/>

</label>

<i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>

</div>

在入口处，我有这样的东西：
https://i.stack.imgur.com/Z4cLM.png

您必须能够使用现有类进行。 bootstrap 和一个小的用户风格。

<form>

<div class="input-prepend">

<span class="add-on">

<i class="icon-user"></i>

</span>

<input class="span2" id="prependedInput" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;" type="text"/>

</div>

编辑

图标引用课程

icon-user

. 这个答案是写的 Bootstrap 版本 2. 您可以看到以下页面的链接：
http://getbootstrap.com/2.3.2/base-css.html#images
</form>

如果你很幸运，你只需要现代浏览器：尝试 css transform translate. 它不需要包装器，可以配置，以便您可以允许更远的距离 input[type=number] 放置输入 spinner 或将其移动到手柄的左侧。

@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>

http://codepen.io/anon/pen/RPRmNq?editors=110