0
点赞
收藏
分享

微信扫一扫

hbuilder x使用字体图标

四月天2021 2022-04-14 阅读 82
vscode

一  在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即可

 四使用字体图标

1)在压缩包找到 demo-index.html  ,打开

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

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

 

4)添加样式

 

 5)效果如图

 

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

 

 

举报

相关推荐

0 条评论