@[toc]

Official link: www.iconfont.cn/ I spent some time looking at it today, and here are three ways to use it

download

If you don’t want to use itThe fonts iconThen you can find the icon you like to download directlyImage format. SVG is an XML-based vector image format, so you’ll see the option for SVG is == copy SVG== instead of == download SVG==.

Let’s focus on how to use a font icon. Only then can we give it attributes like color, font-size, etc.

  1. To use a font icon, first add the selected icon to the library:

2. Then recommend the font you likeAdd to project(The advantage of adding to the project is that we can manage our ICONS in the cloud, and in the way of project, we can add the icon library for team members to share the project. It has to be said that Ali is very thoughtful. Another benefit is that the official version of the reference file for your ICONS will be generated online, which is not too convenient. Of course, you can add it to the library and click download, but that doesn't give you either of those benefits) 3. Then go to my project and see the icon. Unicode, Font class, and Symbol are three different Font ICONS. There are two different ways to import files for online links and local downloads. So let’s just go ahead and tell you how to use it, and then you’ll see.

  1. To better understand how this works, let’s first chooseDownload to Local, local is a static resource compression package
    • demo_index.htmlIs a tutorial that explains the differences between the three schemes and how to use them.
    • demo.cssisdemo_index.htmlStyle file
    • The remaining files are the files required for each of the three usage scenarios

5. Open thedemo.html, == You can see the use steps,The first stepI made oneThe introduction ofThe url here can actually be replaced by the one on the official websiteLinks to online= =

Introduction to three usage schemes (second/third is recommended)

The tool is HbuilderX, the environment is uni-app(not so different from Vue)

Plan a Unicode

This is the most basic scheme, and font class is an encapsulation of the Unicode scheme

1. The introduction of

  • You can only import files in TTF, woff, woff2, and other formats (do not want to write too much code for testing, several formats are to be compatible with different browsers, please refer to this link to explain the format of several font ICONS). ~@ represents the root path (syntax in vue).

– See how the formats are compatible with different browsersThis link:

2. Call

  • Used directly as text, escape characters on the website ordemo.htmlIn the file

Scheme 2 = = the font – class = =

For this solution, you need to introduce iconfont. CSS, open the iconfont. CSS file to see the following figure, which is how to use Unicode encapsulation. It relies on all files of the Unicode scheme. You only need to add the class attribute to use it. This scheme is the simplest to operate and is highly recommended

  • Super simple to use 
    <! -- app.vue -->
<style>
	@import "xxxxxxx/iconfont.css";
</style>

<! --class reference -->
<div class="iconfont icon-qianbao"></div>
Copy the code

Plan 3 Symbol

  • This scheme is one of the most recommended official, but also the mainstream of the future, support color. Article see this presumably brothers also should be able to use their own, because the main blog work, so here will not demonstrate. (If you really don’t understand, you can enter the group to chat.)