[英]Use Font Awesome Icon in Placeholder
是否可以在占位符中使用 Font Awesome 图标? 我读到占位符中不允许使用 HTML。 有解决方法吗?
placeholder="<i class='icon-search'></i>"
如果您使用的是FontAwesome 4.7
这应该足够了:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <input type="text" placeholder=" Search" style="font-family:Arial, FontAwesome" />
可以在Font Awesome 备忘单中找到十六进制代码列表。 但是,在最新的 FontAwesome 5.0 中,此方法不起作用(即使您将 CSS 方法与更新的font-family
结合使用)。
您无法添加图标和文本,因为您无法对占位符的一部分应用不同的字体,但是,如果您只对一个图标感到满意,那么它就可以工作。 FontAwesome 图标只是带有自定义字体的字符(您可以查看content
规则中转义 Unicode 字符的FontAwesome Cheatsheet 。在变量中找到的 less 源代码中。less挑战是在输入时交换字体不为空。像这样将它与 jQuery 结合起来。
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
使用这个 CSS:
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
而这个(简单的)jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
但是,字体之间的过渡不会平滑。
我用这个方法解决了:
在 CSS 中,我将此代码用于fontAwesome 类:
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}
在 HTML 中,我在占位符中添加了fontawesome 类和fontawesome 图标代码:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
您可以在CodePen 中看到。
@Elli 的答案可以在 FontAwesome 5 中使用,但它需要使用正确的字体名称并使用您想要的版本的特定 CSS。 例如,当使用 FA5 Free 时,如果我包含 all.css,我无法让它工作,但如果我包含solid.css,它就可以正常工作:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css"> <input type="text" placeholder=" Search" style="font-family: Arial, 'Font Awesome 5 Free'" />
对于 FA5 Pro,字体名称是“Font Awesome 5 Pro”
如果支持,您可以将::input-placeholder
伪选择器与::before
结合使用。
请参阅以下示例:
http://codepen.io/JonFabritius/pen/nHeJg
我刚刚在做这个并遇到了这篇文章,我从中修改了这些东西:
我正在使用 Ember(版本 1.7.1),我需要绑定输入的值并有一个占位符,它是一个 FontAwesome 图标。 在 Ember 中绑定值的唯一方法(我知道)是使用内置的助手。 但这会导致占位符被转义,“”就像那样显示,文本。
无论您是否使用 Ember,您都需要将输入占位符的 CSS 设置为具有 FontAwesome 的字体系列。 这是 SCSS(使用Bourbon 作为占位符样式):
input {
width:96%;
margin:5px 2%;
padding:0 8px;
border:1px solid #444;
border-radius: 14px;
background: #fff;
@include placeholder {
font-family: 'FontAwesome', $gotham;
}
}
如果您只是使用把手,如前所述,您可以将 html 实体设置为占位符:
<input id="listFilter" placeholder="" type="text">
如果您使用 Ember,请将占位符绑定到具有 unicode 值的控制器属性。
在模板中:
{{text-field
id="listFilter"
placeholder=listFilterPlaceholder
value=listFilter}}
在控制器上:
listFilter: null,
listFilterPlaceholder: "\uf002"
值绑定工作正常!
使用placeholder=""
在您的输入中。 您可以在 FontAwesome 页面http://fontawesome.io/icons/ 中找到 unicode。 但是你必须确保添加style="font-family: FontAwesome;"
在您的输入中。
任何想知道Font Awesome 5实现的人:
不要指定通用的“Font Awesome 5”字体系列,您需要特别以您正在使用的图标分支结束。 例如,我在这里使用分支“品牌”。
<input style="font-family:'Font Awesome 5 Brands' !important"
type="text" placeholder="">
我知道这个问题很老了。 但我没有看到像以前那样简单的答案。
您只需要将fas
类添加到输入并在这种情况下为 Font-Awesome 的字形添加一个有效的十六进制
如下<input type="text" class="fas" placeholder="" />
您可以在此处的官方网站中找到每个字形的 unicode。
这是一个不需要 css 或 javascript 的简单示例。
input { padding: 5px; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <form role="form"> <div class="form-group"> <input type="text" class="fas" placeholder="" /> </div> </form>
我通过添加fa-placeholder
类来输入文本来做到这一点:
<input type="text" name="search" class="form-control" placeholder="" />
所以,在css中添加这个:
.fa-placholder { font-family: "FontAwesome"; }
它对我很有效。
更新:
要在用户输入文本时更改字体,只需在 font awesome 后添加字体即可
.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }
忽略 jQuery,这可以使用输入元素的::placeholder
来完成。
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</div>
</form>
css部分
input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }
input.name{ font-family:[font family you want to specify] }
最好的部分:您可以为占位符和文本使用不同的字体系列
我以不同的方式解决了这个问题,它可以通过 html 代码与任何 FA 图标一起使用。 而不是占位符的所有这些困难,我的解决方案是:
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">
CSS
.block__icon {
position: absolute;
margin: some-corrections;
}
.block__input {
padding: some-corrections;
}
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder=" Some text">
CSS
.block__icon {
position: absolute;
z-index: 2; /* New line */
margin: some-corrections;
}
.block__input {
position: relative; /* New line */
z-index: 2; /* New line */
padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
z-index: 1;
}
这比我以前想象的要难,但我希望我已经帮助过任何人。
代码笔: https ://codepen.io/dzakh/pen/YzKqJvy
由于 Jason 提供的答案中的字体发生变化,因此会有一些轻微的延迟和卡顿。 使用“change”事件而不是“keyup”可以解决这个问题。
$('#iconified').on('change', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
我在占位符中同时添加了文本和图标。
placeholder="Edit "
CSS :
font-family: FontAwesome,'Merriweather Sans', sans-serif;
如果您可以/想要使用 Bootstrap,解决方案将是输入组:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="-">
</div>
看起来像这样:输入带有文本前置和搜索符号
Teocci解决方案尽可能简单,因此,无需添加任何 CSS,只需为 Font Awesome 5 添加 class="fas",因为它为元素添加了正确的 CSS 字体声明。
这是 Bootstrap 导航栏中搜索框的示例,搜索图标添加到输入组和占位符(当然,为了演示,没有人会同时使用两者)。 图片:https://i.imgur.com/v4kQJ77.png > 代码:
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control fas text-right" placeholder="" aria-label="Search string">
<div class="input-group-append">
<button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
</div>
</div>
</form>
有时最重要的是回答不工作,当您可以使用以下技巧时
.form-group { position: relative; } input { padding-left: 1rem; } i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <form role="form"> <div class="form-group"> <input type="text" class="form-control empty" id="iconified" placeholder="search"> <i class="fas fa-search"></i> </div> </form>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder="search">
<i class="fas fa-search"></i>
</div>
</form>
.form-group {
position: relative;
}
i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
input {
padding-left: 1rem;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.