在占位符中使用Font Awesome图标


110

是否可以在占位符中使用Font Awesome Icon?我读到了在占位符不允许HTML的地方。有解决方法吗?

placeholder="<i class='icon-search'></i>"

Answers:


61

您无法添加图标和文本,因为您无法将其他字体应用于占位符的一部分,但是,如果您对仅图标感到满意,那么它就可以工作。FontAwesome图标只是带有自定义字体的字符(您可以在规则中查看FontAwesome备忘单中转义的Unicode字符content。在较少的源代码中,可以在变量中找到它。less的挑战是,当输入为不是空的。与jQuery结合起来像这样

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </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');
    }
});

但是,字体之间的过渡将不平滑。


4
FontAwesome将为所有非Unicode符号显示常规字符。对我来说,插入unicode实体不起作用,但是在符号中粘贴有效:placeholder =“Hello”
DanielKhan

对于FontAwesome 5,请使用字体家族:Font Awesome \ 5免费;代替。
安德鲁·舒尔茨

1
@AndrewSchultz,font-family: Font Awesome\ 5 Free;不起作用。我只需要使用font-family: FontAwesome;
kanlukasz

实际上,您可以将不同的字体应用于输入。我在安装FA5 Pro的过程中做到了这一点,并应用于font-family: 'Font Awesome 5 Pro', 'Montserrat';搜索领域,它的魅力十足。
杰夫W

228

如果您使用的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="&#xF002; Search" style="font-family:Arial, FontAwesome" />

可以在Font Awesome速查表中找到十六进制代码的列表。但是,在最新的FontAwesome 5.0中,此方法不起作用(即使您将CSS方法与update结合使用font-family)也是如此。


8
您从哪里获得&#xF002;价值的?我的意思是,你是如何从去icon-search&#xF002
ІгарЦімошка

2
您甚至都不需要id="iconified"仅添加class="fa",超棒的字体将为您处理css。
Pedro Hoehl Carvalho 2015年

8
我必须更改字体顺序以使其起作用:<input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">。否则,将显示一个包含“ fl”的符号。
Guillaume Renoult



20

我用这种方法解决了:

在CSS中,我将此代码用于fontAwesome类

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

在HTML中,我在占位符内添加了fontawesome类fontawesome图标代码

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

您可以在CodePen中看到。


这也适用于使用FA5 Pro的人input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
ChrisB

10

@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="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

对于FA5 Pro,字体名称为'Font Awesome 5 Pro'



8

我正在使用Ember(版本1.7.1),我需要绑定输入的值并有一个占位符,它是一个FontAwesome图标。在Ember中绑定值的唯一方法(我知道)是使用内置帮助器。但这导致占位符被转义,“&#xF002”正好显示为文本。

如果不使用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="&#xF002;" type="text">

如果使用Ember,则将占位符绑定到具有unicode值的控制器属性。

在模板中:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

在控制器上:

listFilter: null,
listFilterPlaceholder: "\uf002"

并且值绑定工作正常!

占位符示例

占位符gif


这是使用Ember 1.7.1
RustyToms

对于那些正在使用其他Web技术的人来说是不错的帖子。
2014年

1
非常感谢!我挠了一下头。感谢您详细介绍解决方案!
曹Mo


4

我通过fa-placeholder在输入文本中添加类来实现:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

因此,在CSS中只需添加以下内容:

.fa-placholder { font-family: "FontAwesome"; }

这对我来说很有用。

更新:

要在用户输入文本输入时更改字体,只需在字体很棒之后添加字体

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }



3

可以使用::placeholder输入元素来忽略jQuery 。

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </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] }

最好的部分:您可以为占位符和文本使用不同的字体系列


3

我知道这个问题很老了。但是我没有看到像以前那样简单的答案。

您只需要fas在输入中添加类并在这种情况下为Font-Awesome的字形放置一个有效的十六进制&#xf002如下所示<input type="text" class="fas" placeholder="&#xf002" />

您可以在官方网站上找到每个字形的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="&#xf002" />
  </div>
</form>


这是Font Awesome 5的答案。谢谢!
laviex

1

Jason提供的答案中的字体更改时,会有一些轻微的延迟和混乱。使用“更改”事件而不是“按键”可以解决此问题。

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

1

我在占位符中同时添加了文本和图标。

placeholder="Edit &nbsp; &#xf040;"

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

1

如果可以/想要使用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>

看起来像这样:输入带有文本前缀和搜索符号


1

我已经以不同的方式解决了这个问题,它可以通过html代码与任何FA图标一起使用。除了使用占位符的所有这些困难之外,我的解决方案是:

  1. 以通常的方式放置图标
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;
}
  1. 然后调整占位符的文本(每个人都是私人的,在我的情况下,图标就在文本之前)
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...
  1. 这是一个问题,在我们的输入上方有一个图标,会阻止光标单击,因此我们应该在CSS中再添加一行
CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}
  1. 但是图标不会与占位符一起消失,因此我们需要对其进行修复。这也是我的解决方案的最终版本
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;
}

这比我以前想象的要难,但是我希望我能对此有所帮助。

Codepen:https://codepen.io/dzakh/pen/YzKqJvy


0

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="&#xf002;" 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>

0

有时,最重要的是,当您可以使用以下技巧时

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.