hbuilderx使用字体图标

一  在iconfont  网站 中下载 想要的字体图标

iconfont-阿里巴巴矢量图标库

1）把想要的图标放到购物车里面

2）点击右上角购物车

3）下载压缩包

4）将压缩包文件解压  ，并改名为  font  放到文件目录中

 二全局引用iconfont.css文件

 在uni.css文件中打入   @import '/font/iconfont.css';

 三把iconfont.css中的本地资源改成在线资源

1）在iconfont  网站中 ，还是刚才的购物车

 2）点击创建新项目  ，给项目命名

 命名之后点击 comfirm

3)查找到这个项目  可以点击 my project 找到

4）复制如下图这段代码（在线地址）

 5)打开 iconfont.css，把第一段 文字 删除  ，替换成刚刚复制的那段，即把本地资源替换成在线资源 

 替换后如图

6）此时，可以删除 其他文件夹，保留icon.css即可

四.创建页面的时候一定要选  scss模板  

可能是因为  在uni.scss里面进行的全局配置，使以也要使用scss模板进行页面编辑

 四使用字体图标

1）在压缩包找到 demo-index.html  ，打开

2）复制 想要的图标的 符号表示

 3）给标签添加 iconfont 类名（可以添加其他的类名加以区分不同样式的iconfont）   ，并且把图标的  &#2222  放到标签里面。

4）添加样式

 5）效果如图

 感觉有点啰嗦 ，写的不对的请帮忙指出，谢谢！