The form Placeholder uses IconFont text

The problem

Recently I was writing a background login page and had the idea of adding a Font awesome icon to the placeholder of the account password entry field. (as shown in figure)

But the placeholder text is defined in the placeholder=”” property. Font awesome is implemented with the

  • tag and the class=”fa” class. So this
  • tag with the class is not going to be able to plug into the placeholder.
    • <input type="text" class="text" placeholder="Username">

<i class="fa fa-user"></i>
Copy the code

    The solution

    I did some research and found ali’s IconFont, also an IconFont frame. Unlike font-awesome, IconFont offers a variety of references. Here we insert the icon text into the form placeholder via a Unicode reference.

    1. First we select a few ICONS to add to our own project. It is also worth mentioning in the icon libraryFont-awesomeIcon.
    2. Generate the project, download the file.
    3. Place the downloaded files in the site directory.
    4. In the CSSfont-faceandThe style of the iconfont.
    5. Then, inplaceholderInsert the corresponding icon into the value ofunicodeCan.

    <input type="text" class="text" placeholder="&#xe751;&nbsp;The user name">
Copy the code

    conclusion

    Finally, I summarize the advantages of IconFont:

    1. There are several ways to introduce icon fonts for different situations.
    2. The icon library is rich, and you can edit the icon twice, or upload your own design icon.
    3. Instead of importing the entire icon library, you simply add the icon file from your own project. Save space and speed up loading.
    4. Support domestic production.