Layui 扩展字体图标
layui 目前(2020-06-28)提供了168个图标,但是很多时候这些图标中没有自己想要的,今天在项目中想找一个二维码的图标,但是在layui提供的图标中并没有,此时我们可以扩展图标(阿里巴巴矢量图标库 www.iconfont.cn)layui提供的图标也是取材于此
1. 进入阿里巴巴矢量图标库官网,登陆账号
阿里巴巴矢量图标库官网
任选一种方式登陆账号,必须登陆,否则无法进行下载
2. 下载图标
搜索想要的图标,滑过图标、加入购物车
点击 下载代码
,得到一个zip压缩包
解压压缩包,得到一个文件夹
demo_index.html
示例文件,使用方法看该文件即可
3. 三种使用方式
- Unicode 引用 (兼容性最好,单色图标)
- Font-class 引用 (兼容性良好,单色图标,单色推荐)
- Symbol 引用 (兼容性较差,彩色图标,彩色推荐)
a. Unicode 引用,相对来说较麻烦
b. Font-class 引用
需要修改图标类名或样式可在 iconfont.css
中修改
c. Symbol 引用,需要彩色图标时使用
4. Font-class 使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<i class="iconfont icon-erweima"></i>
<br><br>
<i class="iconfont icon-QQ"></i>
<br><br>
<i class="iconfont icon-weixin"></i>
</body>
</html>
本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!
从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!
本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。
本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。