[英]How do I add a Font Awesome icon to input field?
如何使用 Font Awesome 中包含的搜索图标进行输入? 我的网站上有一个搜索功能(基于 PHPmotion),我想将其用于搜索。
这是代码:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
您可以使用另一个标签代替input
并以正常方式应用 FontAwesome。
您可以使用以下命令代替input
类型image
:
<i class="icon-search icon-2x"></i>
快速CSS :
.icon-search {
color:white;
background-color:black;
}
这是一个快速的小提琴: DEMO
您可以更好地设置样式并向 i 对象添加事件功能,您可以使用<button type="submit">
对象代替i
或使用 javascript。
按钮解决方案将是这样的:
<button type="submit" class="icon-search icon-large"></button>
和CSS :
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
这是我用按钮而不是 i 更新的小提琴: DEMO
FontAwsome 的问题在于它的样式表使用:before
伪元素将图标添加到元素 - 并且伪元素不起作用/不允许在input
元素上使用。 这就是为什么使用FontAwesome正常的方式将不会与工作input
。
但是有一个解决方案- 您可以将 FontAwesome 用作常规字体,如下所示:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
字形可以作为value
属性的value
传递。 可以在 FontAwesome css 文件中找到各个字母/图标的 ascii 代码,您只需要将它们更改为 HTML ascii 数字,如\\f002
到
它应该工作。
链接到FontAwesome ascii码(cheatsheet文件): fortawesome.github.io/Font-Awesome/cheatsheet
图标的大小可以通过font-size
轻松调整。
请参阅上面使用 jsfidde 中的input
元素的示例:
在 FontAwesome 版本 5 中,此解决方案所需的 CSS 已更改 - 字体系列名称已更改,并且必须指定字体粗细:
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
请参阅@WillFastie 的评论以及指向下面更新的小提琴的链接。 谢谢!
这是一个使用简单的 CSS 和标准字体很棒的语法的解决方案,不需要 unicode 值等。
创建一个<input>
标签,然后是一个带有您需要的图标的标准<i>
标签。
将相对定位与更高层顺序 (z-index) 一起使用,并将图标移动到输入字段的上方和顶部。
(可选)您可以使图标处于活动状态,以通过标准 JS 提交数据。
有关 HTML/CSS/JS,请参阅下面的三个代码片段。
或在 JSFiddle 中相同:示例: http : //jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() { alert('Searching for ' + $('#filter').val()); });
#filtersubmit { position: relative; z-index: 1; left: -25px; top: 1px; color: #7B7B7B; cursor: pointer; width: 0; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="filter" type="text" placeholder="Search" /> <i id="filtersubmit" class="fa fa-search"></i>
对于那些想知道如何将 FontAwesome 图标输入到 drupal 输入中的人,您必须首先像这样 decode_entities:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
将您的输入更改为按钮元素,您可以在其上使用 Font Awesome 类。 演示中字形的对齐不是很好,但你明白了:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
#ffffff" /><!--
--><button class="icon-search">Search</button>
<div id="searchBoxSuggestions"></div>
</form>
</div>
#search-bar .icon-search {
width: 30px;
height: 30px;
background: black;
color: white;
border: none;
overflow: hidden;
vertical-align: middle;
padding: 0;
}
#search-bar .icon-search:before {
display: inline-block;
width: 30px;
height: 30px;
}
这里的优点是表单仍然具有完整的功能,而无需为不是按钮但看起来像按钮的元素添加事件处理程序。
与最佳答案类似,我在 HTML 的 value= 部分使用了 unicode 字符,并将 FontAwesome 称为该输入元素上的字体系列。 我要补充的唯一一件事是顶部答案没有涵盖,因为我的 value 元素在图标后面也有文本,将字体系列更改为 FontAwesome 使常规文本看起来很糟糕。 解决方案只是更改 CSS 以包含后备字体:
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
这样,FontAwesome 将抓取图标,但所有非图标文本都将应用所需的字体。
.fa-file-o {
position: absolute;
left: 50px;
top: 15px;
color: #ffffff
}
<div>
<span class="fa fa-file-o"></span>
<input type="button" name="" value="IMPORT FILE"/>
</div>
新字体的简单方法真棒
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
要与 unicode 或 fontawesome 一起使用,您应该添加一个具有如下类的跨度,因为输入标签不支持像 :after 这样的伪类。 这不是一个直接的解决方案
在 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.