Html 文本输入元素内的 Font Awesome 图标

Question

提问by Seong Lee

I am trying to insert a user icon inside username input field.

我正在尝试在用户名输入字段中插入用户图标。

I've tried one of the solution from the similar questionknowing that background-imageproperty won't work since Font Awesomeis a font.

我已经尝试过类似问题的解决方案之一，background-image因为Font Awesome是一种字体，因此该属性不起作用。

The following is my approach and I can't get the icon display.

以下是我的方法，我无法获得图标显示。

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

I have font face declared in the default font awesome css so I wasn't sure if adding font-family above was the right approach.

我在默认字体 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');
 }

Answer 1

采纳答案by allcaps

You're right. :before and :after pseudo content is not intended to work on replaced content like imgand inputelements. Adding a wrapping element and declare a font-family is one of the possibilities, as is using a background image. Or maybe a html5 placeholder text fits your needs:

你是对的。:before 和 :after 伪内容不适用于替换内容，如img和input元素。添加包装元素并声明字体系列是一种可能性，就像使用背景图像一样。或者也许 html5 占位符文本适合您的需要：

<input name="username" placeholder="&#61447;">

Browsers that don't support the placeholder attribute will simply ignore it.

不支持占位符属性的浏览器将简单地忽略它。

UPDATE

更新

The before content selector selects the input: input[type="text"]:before. You should select the wrapper: .wrapper:before. See http://jsfiddle.net/allcaps/gA4rx/. I also added the placeholder suggestion where the wrapper is redundant.

之前的内容选择器选择输入：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="&#61447; Username"></p>

Fallback

倒退

Font Awesome uses the Unicode Private Use Area (PUA) to store icons. Other characters are not present and fall back to the browser default. That should be the same as any other input. If you define a font on input elements, then supply the same font as fallback for situations where us use an icon. Like this:

Font Awesome 使用 Unicode Private Use Area (PUA) 来存储图标。其他字符不存在并回退到浏览器默认值。这应该与任何其他输入相同。如果您在输入元素上定义字体，则在我们使用图标的情况下提供与回退相同的字体。像这样：

input { font-family: 'FontAwesome', YourFont; }

Answer 2

回答by Palanikumar

Output:

输出：

enter image description here

在此处输入图片说明

HTML:

HTML：

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

CSS：

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Or)

（或者）

Output:

输出：

HTML:

HTML：

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

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>

Answer 3

回答by Mero

You could use a wrapper. Inside the wrapper, add the font awesome element iand the inputelement.

您可以使用包装器。在包装器内，添加字体 awesome 元素i和input元素。

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

then set the wrapper's position to relative:

然后将包装器的位置设置为相对位置：

.wrapper { position: relative; }

and then set the ielement's position to absolute, and set the correct place for it:

然后将i元素的位置设置为绝对位置，并为其设置正确的位置：

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(It's a hack, I know, but it gets the job done.)

（我知道这是一个黑客，但它完成了工作。）

Answer 4

回答by Skeets

This answer will work for you if you need the following conditions met (none of the current answers met these conditions):

如果您需要满足以下条件（当前的答案均不满足这些条件），则此答案对您有用：

The icon is insidethe text box
The icon shouldn't disappear when text is entered into the input, and text entered goes to the right of the icon
Clicking the icon should bring the underlying input into focus

图标位于文本框内
输入文本时图标不应消失，输入的文本位于图标的右侧
单击该图标应使底层输入成为焦点

I believe that 3 is the minimal number of HTML elements to satisfy these conditions:

我相信 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>

Answer 5

回答by Rashid Iqbal

No need to code a lot... just follow the following steps:

无需大量编码...只需按照以下步骤操作：

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

you can find the links to the Unicode(fontawesome) here...

您可以在此处找到指向 Unicode( fontawesome)的链接...

FontAwesome Unicode for icons

FontAwesome Unicode 图标

Answer 6

回答by Ola Olushesi

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

Answer 7

回答by Henry O.

I found the easiest way using bootstrap 4.

我找到了使用 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>

Answer 8

回答by harryg

Having read various versions of this question and searching around I've come up with quite a clean, js-free, solution. It's similar to @allcaps solution but avoids the issue of the input font being changed away from the main document font.

阅读了这个问题的各种版本并四处搜索后，我想出了一个非常干净、无 js 的解决方案。它类似于@allcaps 解决方案，但避免了输入字体与主文档字体不同的问题。

Use the ::input-placeholderattributeto specifically style the placeholder text. This allows you to use your icon font as the placeholder font and your body (or other font) as the actual input text. Currently you need to specify vendor-specific selectors.

使用该::input-placeholder属性专门设置占位符文本的样式。这允许您将图标字体用作占位符字体，将正文（或其他字体）用作实际输入文本。当前，您需要指定特定于供应商的选择器。

This works well as long as you don't need a combination of icon and text in your input element. If you do then you'll need to put up with the placeholder text being default browser font (plain serif on mine) for words.

只要您的输入元素中不需要图标和文本的组合，这就会很好地工作。如果你这样做，那么你需要忍受占位符文本是默认的浏览器字体（我的纯衬线字体）。

E.g.
HTML

例如
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Fiddle with browser prefixed selectors: http://jsfiddle.net/gA4rx/78/

摆弄浏览器前缀选择器：http: //jsfiddle.net/gA4rx/78/

Note that you need to define each browser-specific selector as a seperate rule. If you combine them the browser will ignore it.

请注意，您需要将每个特定于浏览器的选择器定义为单独的规则。如果将它们组合在一起，浏览器将忽略它。

Answer 9

回答by Besi

I did achieve this like so

我确实做到了这一点

  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>

The result looks like this:

结果如下所示：

Side note

边注

Please note that I am using Ruby on Rails so my resulting code looks a bit blown up. The view code in slim is actually very concise:

请注意，我使用的是 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

Answer 10

回答by Gerard

For me, an easy way to have an icon "within" a text input without having to try to use pseudo-elements with font awesome unicode etc, is to have the text input and the icon within a wrapper element which we will position relative, and then position both the search input and the font awesome icon absolute.

对我来说，在文本输入“内”放置图标而不必尝试使用带有字体真棒 unicode 等的伪元素的简单方法是将文本输入和图标放置在我们将相对定位的包装元素中，然后定位搜索输入和字体真棒图标绝对。

The same way we do with background images and text, we would do here. I feel this is good for beginners as well, as css positioning is something a beginner should learn in the beginning of their coding journey, so the code is easy to understand and reuse.

与我们处理背景图像和文本的方式相同，我们将在这里进行。我觉得这对初学者也有好处，因为 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;
    }

Html 文本输入元素内的 Font Awesome 图标

提问by Seong Lee

采纳答案by allcaps

UPDATE

更新

Fallback

倒退

回答by Palanikumar

回答by Mero

回答by Skeets

回答by Rashid Iqbal

回答by Ola Olushesi

回答by Henry O.

回答by harryg

回答by Besi

Side note

边注

回答by Gerard

相关推荐

最近更新

标签

Html 文本输入元素内的 Font Awesome 图标

提问by Seong Lee

采纳答案by allcaps

UPDATE

更新

Fallback

倒退

回答by Palanikumar

回答by Mero

回答by Skeets

回答by Rashid Iqbal

回答by Ola Olushesi

回答by Henry O.

回答by harryg

回答by Besi

Side note

边注

回答by Gerard

相关推荐

Html 使用 WebDriver 单击 <div class > 链接

Html Bootstrap 中的偏移列

Html 如何使用内联 css 更改引导表的边框颜色

Html 使用 javascript 画布调整图像大小（平滑）

相关推荐

最近更新

标签