This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Today I’m going to teach you how to introduce icon libraries into your actual development

Where is the icon?

In my development projects, I often ask visual friends to choose ICONS in Ali Vector library first

Ari vector library portal

How to use it?

  1. Select the icon

    Here is our Ali vector library page, according to our needs to search the icon we want.

  1. Add to shopping cart

    After selecting the icon, we need to add it to our shopping cart

  1. Add to our project

    In the options above we select Add to project and all ICONS in our shopping cart will be added to our project

    Of course this requires us to create our projects in advance or at any time

  2. Download the code

    When we want to introduce him to my project, we can use an online link or download it locally

Way of introduction

  1. Unicode

    Unicode is the original use of fonts on the web. It has the following features:

    • Support to dynamically adjust icon size, color and so on according to the font.
    • By default, multi-color ICONS are not supported. If you add multi-color ICONS, the colors will be removed automatically.

    Note: The new IconFont supports two ways of referencing multicolor ICONS: SVG symbol referencing and color font icon referencing. (To use the color font icon, you need to turn on the Color option in edit Project and then regenerate it.)

    The steps for using Unicode are as follows:

    Step 1: Copy what is generated under the project@font-face

    @font-face { font-family: 'iconfont'; src: url('iconfont.woff2? t=1638194230407') format('woff2'), url('iconfont.woff? t=1638194230407') format('woff'), url('iconfont.ttf? t=1638194230407') format('truetype'); }Copy the code

    Step 2: Define styles that use iconFONT

    .iconfont { font-family: "iconfont" ! important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }Copy the code

    Step 3: Pick the appropriate icon and get the font code to apply to the page

    <span class="iconfont">&#x33; </span>Copy the code

    “Iconfont” is the font-family for your project. You can view it by editing the project. The default is “iconfont”.

  2. Font class

    Font -class is a variant of Unicode, mainly to solve the problem of Unicode writing is not intuitive, ambiguous semantics.

    Compared to Unicode usage, it has the following features:

    • It is more intuitive to write than Unicode. It’s easy to tell what the icon is.
    • Because you use class to define ICONS, you only need to change the Unicode reference in the class to replace the icon.

    The steps are as follows:

    Step 1: Introduce the FontClass code generated under the project:

    <link rel="stylesheet" href="./iconfont.css">
Copy the code

    Step 2: Select the corresponding icon and get the class name, and apply it to the page:

    <span class="iconfont icon-xxx"></span>
Copy the code

    “Iconfont” is the font-family for your project. You can view it by editing the project. The default is “iconfont”.

  3. Symbol

    This is a completely new way of using it, and it’s the mainstream of the future, and it’s what the platform currently recommends. This usage actually makes a collection of SVG and has the following characteristics compared to the other two:

    • Support for multi-color ICONS, no longer limited by monochrome.
    • Through a few tricks, support like fonts, throughfont-size.colorTo adjust the style.
    • Poor compatibility, support for IE9+, and modern browsers.
    • Browsers render SVG with mediocre performance, not as good as PNG.

    The steps are as follows:

    Step 1: Import the symbol code generated under the project:

    <script src="./iconfont.js"></script>
Copy the code

    Step 2: Add generic CSS code (just once) :

    <style> .icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

    Step 3: Select the corresponding icon and get the class name, apply to the page:

    <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
Copy the code

\