一、字体库的下载

阿里巴巴字体库地址

点击素材库，以单色图标库为例

随便点进去一个

加完之后点击购物车，可以看到所有我们选择的图标，点击添加至项目，没有项目的新建一个就行（点击下载代码或者素材会导致材料不全）

将文件夹解压放到项目根目录

项目文件夹下有这些文件

在head里面引入这里的css文件，注意文件路径要对，不然会引用失败，下面的三种方法的前提都是要引入css样式表

二、在标签中直接引入字体图标类名显示

网页中打开这个文件

点击font class

copy你需要的类名

在需要引用字体图标的地方先加上iconfont（不能漏），再加上刚刚copy的字体图标的类名

最后在网页中成功显示

三、在标签中填写uicode

只需要加入iconfont大类名，再在标签中加入copy的unicode

成功显示

三、伪类运用字体图标

这里要注意的是伪类需要在content里面加上unicode，跟上面不同的是&#x变成\，最后加上font-family:'iconfont',

成功显示

阿里巴巴字体库的下载以及三种用法相关推荐

Python扩展库numpy中where()函数的三种用法
第一种用法:只给where()函数传递一个数组作为参数,返回其中非0元素的下标. 第二种用法:给where()函数传递一个包含True/False值的数组,返回该数组中True值的下标,结合numpy ...
微课系列（6）：Python关键字else的三种用法
技术要点:Python关键字else在选择结构.循环结构和异常处理结构中的三种用法. ----------相关阅读---------- 教学课件 1900页Python系列PPT分享一:基础知识(10 ...
using 的三种用法
using 有哪三种用法? 1)引入命名空间. 2)给命名空间或者类型起别名. 3)划定作用域.自动释放资源,使用该方法的类型必须实现了 System.IDisposable接口,当对象脱离作用域之后 ...
static的三种用法，定义静态变量，静态函数，静态代码块！
static的三种用法,定义静态变量,静态函数,静态代码块! 1.定义静态变量 class PersonStatic { //静态变量的特点 //1.静态变量无需生成对象就可被调用,可以使用类名和对象 ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
SQL、LINQ、Lambda 三种用法(转)
SQL.LINQ.Lambda 三种用法颜色注释: SQL LinqToSql Lambda QA 1. 查询Student表中的所有记录的Sname.Ssex和Class列. select sna ...
标准SQL的update语句三种用法
标准SQL的update语句三种用法一.环境: MySQL-5.0.41-win32 Windows XP professional 二.建立测试环境: DROP TABLE IF EXIS ...
C++容器的insert()函数有以下三种用法: 最终*it=val;
C++容器的insert()函数有以下三种用法: 最终*it=val; //用法1:在指定位置it前"插入"值为val的元素,返回指向这个元素的迭代器, iterator inse ...
【零基础学Java】—this关键字的三种用法+Java继承的三个特点（二十一）
[零基础学Java]-this关键字的三种用法+Java继承的三个特点(二十一) 一.this关键字的三种用法在本类的成员方法中,访问本类的成员变量在本类的成员方法中,访问本类的另一个成员方法在 ...
C++ 命名空间三种用法
C++ 命名空间三种用法 1.#include <iostream> using namespace std; //直接using会把整个空间里的东西全部引入,这样做的优点是省事,缺点是如 ...

阿里巴巴字体库的下载以及三种用法

一、字体库的下载

二、在标签中直接引入字体图标类名显示

三、在标签中填写uicode

三、伪类运用字体图标

阿里巴巴字体库的下载以及三种用法相关推荐

最新文章

热门文章