文本输入元素内的 Font Awesome 图标
Posted
技术标签:
【中文标题】文本输入元素内的 Font Awesome 图标【英文标题】：Font Awesome icon inside text input element 【发布时间】：2013-10-17 14:46:12 【问题描述】：我正在尝试在用户名输入字段中插入用户图标。
我尝试了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');
【问题讨论】：
你想知道什么？问题/错误是什么？ @allcaps 哎呀..我承认，仅查看我的原始帖子无法识别我遇到的错误。我编辑了一下。 查看我的更新答案。 【参考方案1】：你是对的。 :before 和 :after 伪内容不适用于 img 和 input 元素等替换内容。添加包装元素并声明字体系列是一种可能性，就像使用背景图像一样。或者，也许 html5 占位符文本符合您的需求：
<input name="username" placeholder="">
不支持占位符属性的浏览器会直接忽略它。
更新
之前的内容选择器选择输入：input[type="text"]:before。您应该选择包装器：.wrapper:before。见http://jsfiddle.net/allcaps/gA4rx/。
我还添加了占位符建议，其中包装器是多余的。
.wrapper input[type="text"]
position: relative;
input font-family: 'FontAwesome'; /* This is for the placeholder */
.wrapper:before
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
<p class="wrapper"><input placeholder=" Username"></p>后备
Font Awesome 使用 Unicode Private Use Area (PUA) 来存储图标。其他字符不存在并回退到浏览器默认值。这应该与任何其他输入相同。如果您在输入元素上定义字体，则在我们使用图标的情况下提供与备用字体相同的字体。像这样：
input font-family: 'FontAwesome', YourFont;
【讨论】：
使用占位符方法有效。问题是普通（非图标）文本与页面其余部分的字体不匹配，并显示为浏览器默认衬线。有什么办法可以解决这个问题？ Font Awesome 使用 Unicode Private Use Area (PUA) 来存储图标。其他字符不存在并回退到浏览器默认值。这应该与任何其他输入相同。如果您在某处的输入元素上定义字体，则在我们使用图标的情况下提供相同的字体作为备用字体：input font-family: 'FontAwesome' YourFont; 。这有帮助吗？您可以随时提出新问题。
@allcaps 建议使用后备字体系列作为占位符作品 WONDERS！我没想过通过后备来更改字体。您能否更新您的答案以包含供未来用户使用的后备字体？谢谢！
在哪里可以找到代码列表。我的意思是 fa-user 到
@Elyor：您不需要使用 html 实体。如果你的项目是 UTF-8，你可以复制粘贴 Font Awesome 字形。它可能会在您的代码编辑器中显示为一个块，但这没关系。您还可以使用众多在线 unicode-to-html-entities-convertors 之一。【参考方案2】：
要使用 unicode 或 fontawesome，您应该添加 span 和 class，如下所示：
在 HTML 中：
<span class="button1 search"></span>
<input name="username">
在 CSS 中：
.button1
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
【讨论】：
这不会将图标放在文本输入中【参考方案3】：阅读了这个问题的各种版本并四处搜索后，我想出了一个非常干净、无 js 的解决方案。它类似于@allcaps 解决方案，但避免了输入字体被更改为远离主文档字体的问题。
使用::input-placeholder attribute 专门设置占位符文本的样式。这使您可以将图标字体用作占位符字体，将正文（或其他字体）用作实际输入文本。目前您需要指定特定于供应商的选择器。
只要您的输入元素中不需要图标和文本的组合，这种方法就可以很好地工作。如果你这样做了，那么你需要忍受占位符文本是默认浏览器字体（我的纯衬线字体）。
例如HTML
<p class="wrapper">
<input class="icon" type="text" placeholder="" />
</p>
CSS
.wrapper
font-family:'arial', sans-serif;
input.icon::-webkit-input-placeholder
font-family:'FontAwesome';
使用浏览器前缀选择器：http://jsfiddle.net/gA4rx/78/
请注意，您需要将每个特定于浏览器的选择器定义为单独的规则。如果你把它们结合起来，浏览器会忽略它。
【讨论】：
虽然它是一个优雅的解决方案，但它并没有达到预期的效果。 确实，目前看来 Webkit 浏览器是唯一接受font-family 选择器的浏览器。我们只能希望将来能得到更广泛的接受。【参考方案4】：
<!doctype html>
<html>
<head>
## Heading ##
<meta charset="utf-8">
<title>
Untitled Document
</title>
</head>
<style>
li
display: block;
width: auto;
ul li> ul li
float: left;
ul li> ul
display: none;
position: absolute;
li:hover > ul
display: block;
margin-left: 148px;
display: inline;
margin-top: -52px;
a
background: #f2f2ea;
display: block;
/*padding:10px 5px;
*/
width: 186px;
height: 50px;
border: solid 2px #c2c2c2;
border-bottom: none;
text-decoration: none;
li:hover >a
background: #ffffff;
ul li>li:hover
margin: 12px auto 0px auto;
padding-top: 10px;
width: 0;
height: 0;
border-top: 8px solid #c2c2c2;
.bottom
border-bottom: solid 2px #c2c2c2;
.sub_m
border-bottom: solid 2px #c2c2c2;
.sub_m2
border-left: none;
border-right: none;
border-bottom: solid 2px #c2c2c2;
li.selected
background: #6D0070;
#menu_content
/*float:left;
*/
.ca-main
padding-top: 18px;
margin: 0;
color: #34495e;
font-size: 18px;
.ca-sub
padding-top: 18px;
margin: 0px 20px;
color: #34495e;
font-size: 18px;
.submenu a
width: auto;
h2
text-align: center;
</style>
<body>
<ul>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 1
</h2>
</div>
</a>
<ul class="submenu" >
<li>
<a href="#" class="sub_m">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_1
</h2>
</div>
</a>
</li>
<li>
<a href="#" class="sub_m2">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_2
</h2>
</div>
</a>
</li>
<li >
<a href="#" class="sub_m">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_3
</h2>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 2
</h2>
</div>
</a>
</li>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 3
</h2>
</div>
</a>
</li>
<li>
<a href="#" class="bottom">
<div id="menu_content">
<h2 class="ca-main">
Item 4
</h2>
</div>
</a>
</li>
</ul>
</body>
</html>
【讨论】：
【参考方案5】：您可以使用包装器。在包装器中，添加字体 awesome 元素 i 和 input 元素。
<div class="wrapper">
<i class="fa fa-icon"></i>
<input type="button">
</div>
然后将包装器的位置设置为相对：
.wrapper position: relative;
然后将i元素的位置设置为绝对位置，并为其设置正确的位置：
i.fa-icon position: absolute; top: 10px; left: 50px;
（我知道这是一个 hack，但它可以完成工作。）
【讨论】：
为什么我们需要一个 .wrapper？ 据我了解，绝对元素是相对于最近的“定位”祖先放置的。位置：相对意味着包装器是“定位的”（它也可以是绝对的、固定的或粘性的）。如果你不这样做，图标将相对于 dom 中更高的其他元素进行绝对定位（或者如果没有找到定位元素，则相对于视口）。【参考方案6】：输出：
HTML：
<input name="txtName" id="txtName">
<span class="fa fa-info-circle errspan"></span>
CSS：
<style type="text/css">
.errspan
float: right;
margin-right: 6px;
margin-top: -20px;
position: relative;
z-index: 2;
color: red;
</style>
（或）
输出：
HTML：
<div class="input-wrapper">
<input type="text" />
</div>
CSS：
<style type="text/css">
.input-wrapper
display:inline-block;
position: relative
.input-wrapper:after
font-family: 'FontAwesome';
content: '\f274';
position: absolute;
right: 6px;
</style>
【讨论】：
这是在文本框上使用 font-awesome 的绝妙技巧。 是否可以使该图标可点击？ @FrenkyB，是的。 设置z-index: 1 将使基础输入在您单击图标时成为焦点 - 例如在添加日期选择器时您可能想要的东西。
对我来说很好，但我没有使用position: relative（不需要负边距）也没有使用z-index（只要在输入后呈现元素）【参考方案7】：
以全大写建议为基础。这是使用最少的 HTML 的 font-awesome 背景方法：
<div class="wrapper"><input></div>
.wrapper
position: relative;
input padding-left: 20px;
.wrapper:before
font-family: 'FontAwesome';
position: absolute;
top: 2px;
left: 3px;
content: "\f007";
【讨论】：
【参考方案8】：我确实做到了这一点
form i
left: -25px;
top: 23px;
border: none;
position: relative;
padding: 0;
margin: 0;
float: left;
color: #29a038;
<form>
<i class="fa fa-link"></i>
<div class="form-group string optional profile_website">
<input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
</div>
<i class="fa fa-facebook"></i>
<div class="form-group url optional profile_facebook_url">
<input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
</div>
<i class="fa fa-twitter"></i>
<div class="form-group url optional profile_twitter_url">
<input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
</div>
<i class="fa fa-instagram"></i>
<div class="form-group url optional profile_instagram_url">
<input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
</div>
<input type="submit" name="commit" value="Add profile">
</form>结果如下：
旁注
请注意，我使用的是 Ruby on Rails，因此生成的代码看起来有点夸张。 slim中的视图代码其实很简洁：
i.fa.fa-link
= f.input :website, label: false
i.fa.fa-facebook
= f.input :facebook_url, label: false
i.fa.fa-twitter
= f.input :twitter_url, label: false
i.fa.fa-instagram
= f.input :instagram_url, label: false
【讨论】：
【参考方案9】：我尝试了下面的东西，它真的很好用 HTML
input.hai
width: 450px;
padding-left: 25px;
margin: 15px;
height: 25px;
background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
background-color: grey;
<div >
<input class="hai" placeholder="Search term">
</div>【讨论】：
问题是关于使用字体真棒图标【参考方案10】：使可点击图标聚焦在文本输入元素内。
CSS
.myClass
font-size:20px;
position:absolute; top:10px; left:10px;
HTML
<div>
<label style="position:relative;">
<i class="myClass fa fa-address-book-o"></i>
<input class="w3-input" type="text" style="padding-left:40px;">
</label>
</div>
只需在 <i> 标签中添加您喜欢的任何图标，来自 Font Awesome 库并享受结果。
【讨论】：
【参考方案11】：如果您需要满足以下条件（当前答案均不满足这些条件），此答案将适用于您：
-
图标在内文本框
在输入中输入文本时图标不应消失，输入的文本会移到图标的右侧
单击该图标应使基础输入成为焦点
我认为 3 是满足这些条件的 HTML 元素的最少数量：
.input-icon
position: absolute;
left: 3px;
top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
input
padding-left: 17px;
.input-wrapper
position: relative;
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
<input id="stuff">
<label for="stuff" class="fa fa-user input-icon"></label>
</div>【讨论】：
将图标放在输入字段中的最佳答案，在用户键入时图标仍然可见。 top: calc(50% - 0.5em) 假设您的标签高度为 1em @drichar - 我刚刚测试过，这仍然适用于任何标签高度。只要您不在标签内垂直对齐标签文本（这不是默认设置），由于默认情况下它与顶部对齐，因此较高的标签仍然可以正常工作。我还在标签和输入上使用不同的字体大小进行了测试。它似乎适用于所有场景。 @SkeetsO'Reilly 我的立场是正确的。我混淆了em和rem。 0.5em 是字体大小的一半。很好的解决方案，我在一个项目中使用它（只使用自定义 SVG，而不是 FA，它没有字体大小，这导致了我的定位问题和错误的评论）【参考方案12】：无需编写大量代码...只需按照以下步骤操作即可：
<input id="input_search" type="text" class="fa" placeholder=" Search">
您可以在此处找到指向 Unicode(fontawesome) 的链接...
FontAwesome Unicode for icons
【讨论】：
如果我已经在使用另一个字体系列作为占位符怎么办？那么它将无法正常工作。有没有办法让“ Search”中的文本“Search”使用自定义字体而unicode仍然使用fontawesome字体？【参考方案13】：我找到了使用 bootstrap 4 的最简单方法。
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span></div>
<input type="text"/>
</div>
【讨论】：
【参考方案14】：<HTML>
<head>
<style>
.inp1
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
</style>
</head>
<body>
<div class="inp1">
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>
【讨论】：
如果您还发布一些有关此代码块正在做什么的解释，这将对 OP 更有帮助！【参考方案15】：::-webkit-search-cancel-button
height: 10px;
width: 10px;
display: inline-block;
/*background-color: #0e1d3033;*/
content: "&#f00d;";
font-family: FontAwesome;
font-weight: 900;
-webkit-appearance: searchfield-cancel-button !important;
input#searchInput
-webkit-appearance: searchfield !important;
<input data-type="search" type="search" id="searchInput" class="form-control">
【讨论】：
【参考方案16】：对我来说，一种在文本输入“内”放置图标而不必尝试使用带有字体真棒 unicode 等的伪元素的简单方法是将文本输入和图标放在包装元素中，我们将定位相对，然后定位搜索输入和字体真棒图标绝对。
与我们处理背景图像和文本的方式相同，我们将在此处执行此操作。我觉得这对初学者也有好处，因为 css 定位是初学者在开始编码之旅时应该学习的东西，因此代码易于理解和重用。
<div class="searchbar-wrapper">
<i class="fa fa-search searchbar-i" aria-hidden="true"></i>
<input class="searchbar-input" type="search" placeholder="Search...">
</div>
.searchbar-wrapper
position:relative;
.searchbar-i
position:absolute;
top: 50%;
transform: translateY(-50%);
padding: 0 .5rem;
.searchbar-input
padding-left: 2rem;
【讨论】：
【参考方案17】：.input-icon
position: absolute;
left: 3px;
top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
input
padding-left: 17px;
.input-wrapper
position: relative;
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
<input id="stuff">
<label for="stuff" class="fa fa-user input-icon"></label>
</div>【讨论】：
您好，请为您的解决方案附上一点解释。 如果您需要满足以下条件（当前答案均不满足这些条件），此答案将适用于您： 图标在文本框内 输入文本时图标不应消失输入，并且输入的文本转到图标的右侧单击图标应该使基础输入成为焦点我相信 3 是满足条件的 HTML 元素的最小数量【参考方案18】：纯 CSS
input[type=search]
min-width: 320px;
height: 24px;
border: 1px solid #E6E6E6;
border-radius: 8px;
margin-top: 6px;
background-image: url('/img/search.png');
background-size: 16px;
background-position: 280px;
background-repeat: no-repeat;
【讨论】：
你能解释一下你的答案吗？【参考方案19】：我的解决方案是在 input 周围有一个相对容器来保存图标。该外部容器有一个带有所需图标的::after，位于容器内的absolute。
HTML：
<div class="button__outer">
<input type="submit" class="button" value="Send"/>
</div>
SASS 代码：
.button
display: inline-block;
width: auto;
height: 60px;
line-height: 60px;
.button__outer
position: relative;
display: inline-block;
width: auto;
&::after
position: absolute;
right: 0;
top: 0;
height: 60px;
line-height: 60px;
width: 60px;
font-family: 'FontAwesome', sans-serif;
content: "\f054";
color: #fff;
font-size: 27px;
font-weight: 700;
【讨论】：
【参考方案20】：我的解决方案是在输入元素中添加一个很棒的字体图标。这是在输入元素内添加图标的简单代码。只需复制下面的代码并将其放在要添加的位置即可。或者如果您想更改图标，只需将您的图标代码放在<i> 标签中即可。
<style>
body font-family: Arial, Helvetica, sans-serif;
* box-sizing: border-box;
.soft-codeon
display: -ms-flexbox; /* IE10 */
display: flex;
width: 50%;
margin-bottom: 15px;
.icon
padding: 10px;
background: linear-gradient(to right, #ec008c, #fc6767);
color: white;
min-width: 20px;
text-align: center;
.soft-field
width: 100%;
padding: 10px;
outline: none;
border:2px solid #fc6767;
.soft-field:focus
border: 2px solid #ec008c;
</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="soft-codeon">
<i class="fa fa-user icon"></i>
<input class="soft-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="soft-codeon">
<i class="fa fa-envelope icon"></i>
<input class="soft-field" type="text" placeholder="Email" name="email">
</div>【讨论】：
答案很有帮助，但不允许使用垃圾邮件。如果你想拥有类似的东西，你可以在你的个人资料中放一个链接。 虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。【参考方案21】：有时，由于 Font Awesome 版本，图标不会显示。对于版本 5，css 应该是
.dropdown-wrapper::after
content: "\f078";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #000;
position: absolute;
right: 6px;
top: 10px;
z-index: 1;
width: 10%;
height: 100%;
pointer-events: none;
【讨论】：
【参考方案22】：简单的方法，但你需要引导
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
</div>
<input type="email" id="senha_nova" placeholder="Email">
</div><!-- input-group -->
【讨论】：
【参考方案23】：以下简单的解决方案对我有用。
<input type="text" class="fa" placeholder=" Search">
使用此过滤器进行工具搜索：https://www.npmjs.com/package/ng2-search-filter
【讨论】：
【参考方案24】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<style>
.input
border: 1px solid black;
width: 250px;
padding: 10px;
border-radius: 9999px;
.message-input
border: 0;
outline: 0;
margin-left: 20px;
</style>
<body>
<div class="input">
<i class="fas fa-envelope"></i>
<input class="message-input" type="text" placeholder="Message">
</div>
</body>
</html>
【讨论】：
你能详细说明这段代码是如何解决这个问题的吗？【参考方案25】：您可以使用 Bootstrap 5。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container shadow min-vh-100 py-2">
<div class="position-relative">
<input type="text" class="form-control ">
<a href=""><i class="position-absolute top-50 end-0 translate-middle-y pe-2">❌</i></a>
</div>
</div>【讨论】：
以上是关于文本输入元素内的 Font Awesome 图标的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 4 中将 Font-Awesome 图标与一行文本垂直对齐？