Introduction of Ali iconfont icon method and matters needing attention

background

When we do daily projects, we usually use icon ICONS or some icon fonts. Ali Iconfont is one of the most popular fonts we choose. Below, I will introduce how to use it and several commonly used reference methods

Iconfont new project

Official website: www.iconfont.cn/ Select “Icon Management” – “My Project” on the home page

Click “My Project”

Fill in the project information to complete a new project. The [FontClass/Symbol prefix] and [Font Family] parameters are custom and will be associated with our generated code later, by default.

Add ICONS

After creating a new item, find the icon you want and add it to your shopping cart.

Click on the shopping cart icon in the upper right corner of the page, open your shopping cart, select Add to Project, and you can see the added icon under your project.

Under our project, ICONS can be edited, such as size, color, fill color, rotation and so on.

Iconfont was introduced in Vue project

* * * * the official document: * * * * www.iconfont.cn/help/detail…

According to the official document, there are unicode reference, font-class reference, symbol reference three kinds of introduction, these three ways are divided into two cases: download to local introduction, online link introduction. You can see these options under our own project on the Iconfont page.

Unicode references are not recommended

Local introduction

The Unicode method has very little code and does not require downloading local files.

A link to introduce

Online links in Unicode mode refer to the Font-face code.

In vue, you can reference ICONS in your project by writing the project-generated Font-face code and custom iconFONT styles in the style of app.vue. At this point, the style is global, if you want to implement different styles of ICONS, you can add a layer of custom styles.

<i class="iconfont myIconStyle">&#xe64a; </i>Copy the code

Changing properties such as color in the “myIconStyle” style overrides the global style and allows for individual style changes.

Here pay attention to the understanding, the official document said “does not support more than color”, refers to our iconfont web projects, even with multicolor logo, reference will automatically go to color, unified into the default color, no matter you give icon to edit the red icon 2 edit the yellow, when using unicode way reference project will become the default color, However, we can still customize the icon color by modifying the CSS style, but the color editing is at the code level.

Font -class reference Is recommended

As stated in the official documentation, font-class is intended to make the program more intuitive and readable, and using Unicode directly can be difficult to read. Font-class mode is the key to the generated CSS file.

Local introduction

Select files according to the following figure and put them into your own project. In Vue, you are advised to create an Iconfont folder under Assets and put relevant files.

CSS, iconfont. TTF, iconfont. Woff, iconfont

@font-face { font-family: "iconfont"; /* Project id 2974228 */ src: url('iconfont.woff2? t=1640340931514') format('woff2'), url('iconfont.woff? t=1640340931514') format('woff'), url('iconfont.ttf? t=1640340931514') format('truetype'); }Copy the code

In addition, when introducing, it is necessary to pay attention to whether the font file path reference is accurate, otherwise the package may not be recognized

Then import the iconfont. CSS file in main.js, and you can use it normally.

import './assets/iconfont/iconfont.css'
Copy the code

A link to introduce

In the index. HTML header, just import the CSS file

<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1160473_t1iruikumm.css">
Copy the code

Method 2:

Click on the CSS code link

Copy the CSS code in your project and paste it into the iconfont. CSS file and import it in app.vue or main.js

import './assets/iconfont/iconfont.css'
Copy the code

Note: the default URL in iconfont. CSS is CDN link, please change it to HTTP when packaging, otherwise it will not be recognized

@font-face {
  font-family: "iconfont"; /* Project id 2974228 */
  src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),
       url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),
       url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');
}
Copy the code

After packaging

@font-face {
    font-family: "iconfont"; /* Project id 2400747 */
    src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),
    url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),
    url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');
}
Copy the code

Symbol citation not recommended

Local introduction

Download iconfont. Js file into their own project directory, introduced in main.js, in app.vue write general CSS code, can be used.

import './assets/iconfont/iconfont.js'
Copy the code

/* eslint-disable */ can be added at the beginning of the js file to specify that the file does not apply ESLint validation.

A link to introduce

In the index. HTML header, just import the JS file

<script src="//at.alicdn.com/t/font_1160473_t1iruikumm.js"></script>
Copy the code

Uni-app introduces iconfont icon

Basically, the introduction method is the same as Vue, but there is a problem that ICONS are not displayed when packaging. The solution is as follows:

1. In the iconfont. CSS, add *~@* to complete the path

@font-face { font-family: "iconfont"; /* Project id 2642111 */ src: url('~@/static/fonts/iconfont.woff2? t=1625021641165') format('woff2'), url('~@/static/fonts/iconfont.woff? t=1625021641165') format('woff'), url('~@/static/fonts/iconfont.ttf? t=1625021641165') format('truetype'); }Copy the code

2. Introduce iconfont. CSS globally in app.vue

The < style > / * public CSS * / @ import every page url (" ~ @ / static/fonts/iconfont. CSS "); /* #ifdef MP-TOUTIAO */ /* #endif */ </style>Copy the code

3. To use the icon, click “iconfont icon-” in the class TAB to add the downloaded icon

<view class="iconfont icon-yuangongguanli"></view>
Copy the code

Or introducing custom ICONS through official Uni-icons

<uni-icons slot="icon" customPrefix="iconfont" class="icon-fenxiang" color="#f8bd12" size="20"/>

Copy the code

conclusion

Symbol reference is the most officially recommended and the best way, but the browser compatibility is not good. At present, the front-end needs to be compatible with some browsers of lower versions, so it is not recommended to use Symbol reference in consideration of users.

Unicode references are the most compatible with browsers but have poor readability, while Font-class references are less compatible than Unicode references but improve readability. Overall, it is better to use font-class references in current projects.

Because reference network resources are unstable, you are advised to import them locally.

If you add a new icon to the icon library, either update the online link and reintroduce it into the actual project, or re-download the code locally and then introduce the latest iconFONT file into the actual project.

Then there is the issue of file path when introducing, packaging all need to pay attention to.

Click the card below/wechat search, follow the public account “Tianyu Creative Music” (ID: GH_CC865e4C536b)

I heard that praise and attention to this number have found a beautiful little sister yo and after the year will enter a million ah!!

Phase to recommend

[

Share 6 useful websites, very Nice