网站中使用小图标

jianfly.com 2019-01-31 2157次浏览

1.登录阿里图标网站

http://iconfont.cn/

2.登录,搜索图标,比如搜素QQ,将其加入购物车

image

3.选择其他图标,点击购物车中的下载代码,下载zip文件

4.将下载的zip文件解压,得到以下文件,选择其中有用的文件,将其放入Css同级目录新建Font文件中

image

5.参照demo_symbol.html,在网站中引入icofont.css,给需要加图标的标签加上两个class类,分别是icofont  icofont-qq,第二个class类代表图标class类

<a href="http://wpa.qq.com/msgrd?v=3&uin={$config.qq}&site=qq&menu=yes" class="iconfont icon-qq"></a>
<a href="javaScript:void(0)" class="iconfont icon-wechat"></a>

6,阿里图标提供自定义图标上传和下载代码功能,将所需的图标加入到自己的项目以便后期使用,特殊图标可以用ps导出为svg上传后生成代码

image

7.国外有一网站icomoon.io,与阿里图标类似,代码引用更方便,但不少图标都是要钱的,各位按需使用