阿里图标库使用font class 写法和unicode引用，简单，使用快捷

主要介绍 font class和unicode 写法，个人比较偏好这两种写法，使用简单

直接开始吧

使用步骤

1.打开阿里图标库的官网：https://www.iconfont.cn/

2.必须要先登陆，直接搜索想找的图标，比如购物车

有时会弹出一些教程，点了就行，会出来这么多图标。

3.选择好图标，然后加入购物车，这里要注意的是，如果做实际的项目时，肯定会用到多个图标，这时候，需要一次性加入。不然会导致一些问题。

加入完成之后可以在右上角购物车看到自己添加的图标；

4.接下来点击下载代码，将选好的图标下载到本地，解压。

其实，demo_index.html文件就是一个详析的介绍了，里边介绍了三种方法，读者可以自己参考。

5.将下面的这几个文件复制到自己的web项目下，这几个文件包含了三种不同的导入图标的方法文件。可以看demo.html里的介绍。

我是在自己的项目下建了一个iconfont文件夹，将这些文件放进去。

6.这里使用的是Font class方法，

首先，在html页面中引入css文件

<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>

然后再自己要插图标地方引用类就行了

1.Font class写法：
<span class="iconfont icon-gouwuche"></span> 类名可以在下载的文件demo_index.html中查看
2.Unicode写法：
<font class="iconfont">&#xe66e;</font>

如图，如果是那会选择了多个图标的情况下，会出现多个编码和类名（有个 "."别丢了），注意复制好

7.结果如图：

自己也可以修改图标的大小：在iconfont.css文件中修改

我把他改成30px,效果如图：

使用阿里图标库，就不用自己再去PS或者网上去找了，也可以不用使用css精灵去做图标了。感谢阿里妈妈！

阿里图标库使用font class 写法和unicode引用，简单，使用快捷相关推荐

scrapy如何指定生成python3的项目_如何把阿里图标库的图标生成代码并应用于自己的项目...
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
使用在线链接阿里图标库（iconfont）(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
阿里图标库iconfont如何使用
1.在阿里图标库(http://iconfont.cn/)选择自己喜欢的一个或多个图标,效果如下图所示 2.网页右上角的小购物车, 3.这里我们选择下载代码.下载好了后在项目需要的地方解压. 4.这是 ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...
如何把阿里图标库的图标生成代码并应用于自己的项目
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
flutter显示图标_flutter 引入第三方 Icon 图标（以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
HTML中如何使用阿里图标库？
为什么使用阿里图标 1.兼容性最好,支持ie6+,及所有现代浏览器. 2.支持按字体的方式去动态调整图标大小,颜色等等. 3.缺点:因为是字体,所以不支持多色.只能使用平台里单色的图标,就算项目里有多 ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...