我试图在用户名输入字段中插入用户图标 .
我已经尝试了similar question中的一个解决方案,知道 background-image
属性不起作用,因为Font Awesome是一个字体 .
以下是我的方法,我无法显示图标 .
.wrapper input[type="text"] {
position: relative;
}
.wrapper input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: -5px;
content: "\f007";
}
我在默认字体awesome css中声明了字体,所以我不确定上面添加font-family是否是正确的方法 .
@font-face {
font-family: 'FontAwesome';
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
14 回答
要使用unicode或fontawesome来处理此问题,您应该添加
span
和class
,如下所示:在HTML中:
在CSS中:
Build 在allcaps建议的基础上 . 这是具有最少HTML的字体真棒背景方法:
我尝试了下面的东西,它确实很好用HTML
Output:
HTML:
CSS:
我确实这样做了
结果如下:
旁注
请注意我正在使用Ruby on Rails,因此我的结果代码看起来有点夸张 . slim中的视图代码实际上非常简洁:
使可点击图标聚焦在文本输入元素内 .
CSS
HTML
只需在_446431_标签内添加任意图标,从Font Awesome库中添加,即可享受结果 .
无需编写很多代码......只需按照以下步骤操作:
你可以在这里找到Unicode( fontawesome )的链接......
FontAwesome Unicode for icons
阅读了这个问题的各种版本并进行了搜索,我提出了一个非常干净,无js的解决方案 . 它与@allcaps解决方案类似,但避免了输入字体从主文档字体更改的问题 .
使用::input-placeholder attribute专门设置占位符文本的样式 . 这允许您使用图标字体作为占位符字体,将您的正文(或其他字体)用作实际输入文本 . 目前,您需要指定特定于供应商的选择器 .
只要您不需要输入元素中的图标和文本组合,这就可以正常工作 . 如果你这样做,那么你需要把占位符文本作为默认浏览器字体(我的普通衬线)用于单词 .
例如 .
HTML
CSS
使用浏览器前缀选择器:http://jsfiddle.net/gA4rx/78/
请注意,您需要将每个特定于浏览器的选择器定义为单独的规则 . 如果将它们组合在一起,浏览器将忽略它 .
我找到了使用bootstrap 4的最简单方法 .
你是对的 . :before和:after伪内容不适用于替换的内容,如
img
和input
元素 . 添加包装元素并声明字体系列是其中一种可能性,就像使用背景图像一样 . 或者html5占位符文本可能符合您的需求:不支持占位符属性的浏览器将忽略它 .
更新
before内容选择器选择输入:
input[type="text"]:before
. 您应该选择包装器:.wrapper:before
. 见http://jsfiddle.net/allcaps/gA4rx/ . 我还添加了占位符建议,其中包装器是多余的 .后备
Font Awesome使用Unicode专用区(PUA)来存储图标 . 其他字符不存在并回退到浏览器默认值 . 这应该与任何其他输入相同 . 如果在输入元素上定义字体,则在我们使用图标的情况下提供与后备相同的字体 . 像这样:
你可以使用包装器 . 在包装器中,添加字体awesome元素
i
和input
元素 .然后将包装器的位置设置为relative:
然后将
i
元素的位置设置为绝对位置,并为其设置正确的位置:(这是一个黑客,我知道,但它完成了工作 . )
如果您需要满足以下条件,则此答案将适用于您(当前答案均未满足这些条件):
图标位于文本框内
当文本输入到输入中时,图标不应消失,输入的文本将显示在图标的右侧
单击该图标应使基础输入成为焦点
我相信3是满足这些条件的最小HTML元素数: