Layui+阿里ICON，扩展图标|ICONFONT+

Q:Layui自带的内置图标太少了

A:白嫖阿里！

1.搜索需要的icons，下载解压。

2.查看内容，打开iconfont.css研究内容准备引入，具体如下

@font-face {layui-icon: "iconfont";src: url('iconfont.eot?t=1608260815957'); /* IE9 */src: url('iconfont.eot?t=1608260815957#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANwAAsAAAAAB1QAAAMjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCXII3ATYCJAMICwYABCAFhG0HNBthBsgekiSQCAEFAKoAhhni4b/92n3zZxdxjVSzJBoiibynk1RaJRW6lsChTT0DhVFBBun9NusVKAKPoRVpKs/dmtlh7BP3Tn9LfD6gHMeatAatTV2A8daA9sY2UBYXUGDcMHZBSzxOoNagaKKN0upmUMrMcYE457kBUGa0ckNsqBbKFUuzeASZ6nQlXgQegu/Hn8RQkpQKZsL+Wckw5H91Wz7JYcthHgG86cxgqygwD2TiuNK6SxIF5knUqgGpUbCt2OCr22LxuJv94xFEmRldD/oh95p4Dv9SMxLIrr29AlwOehSl+j5VmP++1tfhLi03rF+537pLbt60srp2yffyvuVmdfa6q6dHYe4lrgPUnb6aOTJ9dvLwVMe5qok893dR97y/HUl0+5j7NvRl6LxViJutiBuurm++wOHN1c3k5jnruN5e3/bbKXK/5f5uR7xj+fPg5+GT0S6fD29tpTmY/vveTtqdfWXrMPUgZ6xROaFyVyQHmBfd+r0lyU6LZocUhadqQnVxTf15tSWrNYtkYZ+CzJK/hS2nbJ7QZtbcU+lYfKmGL8mERhE7fou4NbmyNyjCr/xOue9hQ2ZJZmNE2O2Ob7kStt5KSsiifFREY2YJX32pRVRhaBaiuNpayGe6igvx1p/4jfenc+N99tm7yroMPsWLK4E662YH1edrC947r2NZ1gSmLmWFVxlJKmT3k1OrFv+ws9WPocqOm4yEah23aq8ykKBQbZyUafMoqbOAsmrLqDWnbHWdNpRE5BrMOgEQmn1C0ugDhWZLpEz7jpJO/1DWHBLUOg3nLetMBm9VRPEAw8NocA/ih4wGYhuYVRjbiLkR3QBNCwJ6K6YC70YJsfH5cBk2YDrFDGGUS2SMIEKNelQKTsM6nRGZqFGDh1ismjFTZlwcqXpS7JBRD1bWUdgABhuGDNoD4Q0xMiBedcaq8PlGGGeEzgDaUFLlbIVRAr5zJEGs+A6kMqmhU8mtnCMYxUnEMARCUEZ6SCkwYzorYISYqgdpYEOYWOoBPpNMcagS6SqNXV6uf7s1UMtUpbDmFWqP8AAdUrcImAIAAA==') format('woff2'),url('iconfont.woff?t=1608260815957') format('woff'),url('iconfont.ttf?t=1608260815957') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1608260815957#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-SearchUser:before {content: "\e75c";
}

3.在layui模块中搜索相关内容，查看layui自带图标的引入方式

4.依照3的方式引入下载的图标；在layui文件夹的css文件夹下的layui.css同级创建扩展extracss.css,内容是下载文件中的iconfont.css;在font文件夹下创建自己的文件夹myicon引入如图所示的内容，将extracss.css中的路径修改为新的路径，删除不需要的代码，最后如下。

@font-face {font-family: "layui-icon";src: url('../font/myicon/layui-icon.eot?t=1608260815957'); /* IE9 */src: url('../font/myicon/layui-icon.eot?t=1608260815957#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANwAAsAAAAAB1QAAAMjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCXII3ATYCJAMICwYABCAFhG0HNBthBsgekiSQCAEFAKoAhhni4b/92n3zZxdxjVSzJBoiibynk1RaJRW6lsChTT0DhVFBBun9NusVKAKPoRVpKs/dmtlh7BP3Tn9LfD6gHMeatAatTV2A8daA9sY2UBYXUGDcMHZBSzxOoNagaKKN0upmUMrMcYE457kBUGa0ckNsqBbKFUuzeASZ6nQlXgQegu/Hn8RQkpQKZsL+Wckw5H91Wz7JYcthHgG86cxgqygwD2TiuNK6SxIF5knUqgGpUbCt2OCr22LxuJv94xFEmRldD/oh95p4Dv9SMxLIrr29AlwOehSl+j5VmP++1tfhLi03rF+537pLbt60srp2yffyvuVmdfa6q6dHYe4lrgPUnb6aOTJ9dvLwVMe5qok893dR97y/HUl0+5j7NvRl6LxViJutiBuurm++wOHN1c3k5jnruN5e3/bbKXK/5f5uR7xj+fPg5+GT0S6fD29tpTmY/vveTtqdfWXrMPUgZ6xROaFyVyQHmBfd+r0lyU6LZocUhadqQnVxTf15tSWrNYtkYZ+CzJK/hS2nbJ7QZtbcU+lYfKmGL8mERhE7fou4NbmyNyjCr/xOue9hQ2ZJZmNE2O2Ob7kStt5KSsiifFREY2YJX32pRVRhaBaiuNpayGe6igvx1p/4jfenc+N99tm7yroMPsWLK4E662YH1edrC947r2NZ1gSmLmWFVxlJKmT3k1OrFv+ws9WPocqOm4yEah23aq8ykKBQbZyUafMoqbOAsmrLqDWnbHWdNpRE5BrMOgEQmn1C0ugDhWZLpEz7jpJO/1DWHBLUOg3nLetMBm9VRPEAw8NocA/ih4wGYhuYVRjbiLkR3QBNCwJ6K6YC70YJsfH5cBk2YDrFDGGUS2SMIEKNelQKTsM6nRGZqFGDh1ismjFTZlwcqXpS7JBRD1bWUdgABhuGDNoD4Q0xMiBedcaq8PlGGGeEzgDaUFLlbIVRAr5zJEGs+A6kMqmhU8mtnCMYxUnEMARCUEZ6SCkwYzorYISYqgdpYEOYWOoBPpNMcagS6SqNXV6uf7s1UMtUpbDmFWqP8AAdUrcImAIAAA==') format('woff2'),url('../font/myicon/layui-icon.woff?t=1608260815957') format('woff'),url('../font/myicon/layui-icon.ttf?t=1608260815957') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('../font/myicon/layui-icon.svg?t=1608260815957#layui-icon') format('svg'); /* iOS 4.1- */
}
/*
.layui-icon {font-family: "layui-icon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
} *//* .icon-SearchUser:before {content: "\e75c";
} */.layui-icon-SearchUser:before { content: "\e75c"; }

5.大功告成
6.研究下相关文件
6.1
src: url(’…/font/myicon/layui-icon.eot?t=1608260815957’); /* IE9 /
src: url(’…/font/myicon/layui-icon.eot?t=1608260815957#iefix’) format(‘embedded-opentype’), / IE6-IE8 */

eot文件，嵌入式OpenType字体（英语：Embedded OpenType，简称EOT）是被微软设计用来在网页使用的字体格式。该字体格式是OpenType字体的压缩格式。文件的扩展名通常是".eot"。
打开需要相关软件，这就是白嫖的极限了吗。

6.2
url(‘iconfont.woff?t=1608260815957’) format(‘woff’),

Web开放字体格式（Web Open Font Format，简称WOFF）是一种网页所采用的字体格式标准。此字体格式发展于2009年，由万维网联盟的Web字体工作小组标准化，现在已经是推荐标准。此字体格式不但能够有效利用压缩来减少文件大小，并且不包含加密也不受DRM（数字著作权管理）限制。
WOFF本质上是包含了基于SFNT的字体（如TrueType、OpenType或其他开放字体格式），且这些字体均经过WOFF的编码工具压缩，以便嵌入网页中。WOFF 1.0使用zlib压缩，文件大小一般比TTF小40%。而WOFF 2.0使用Brotli压缩，文件大小比上一版小30%。

6.3
url(’…/font/myicon/layui-icon.ttf?t=1608260815957’) format(‘truetype’), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

TrueType是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体（曲线描边字）类型标准。这种类型字体文件的扩展名是.ttf，类型代码是tfil。

6.4
svg就不说了，这些标准是真的多，就不能统一下嘛。

Layui+阿里ICON，扩展图标|ICONFONT+相关推荐

vue项目中如何使用阿里的字体图标iconfont
1.在阿里字体图标库中选择自己需要的图标网址:iconfont-阿里巴巴矢量图标库 1.1 点击购物车,加入选择的图标 1.2 再点击上方购物车,如果是多人写作项目直接添加到项目即可 ...
阿里妈妈字体图标Iconfont的使用方法
使用字体图标的目的:使用字体图标技巧实现网页中简洁的图标效果字体图标 Ø 字体图标展示的是图标,本质是字体. Ø 处理简单的.颜色单一的图片 Iconfont官网地址 :Iconfont官网地址 ...
【Layui】layui 自定义icon 图标
layui 自定义icon 图标 Layui 提供的图标较少,通常不能满足个性化的需求,阿里,font-awesome等提供免费的图库,那么如何扩展呢? 准备工作前提工作,自己下载好layui,注册 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
阿里矢量图标iconfont在微信小程序的使用
阿里矢量图标iconfont在微信小程序的使用第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 ...
如何在网页中使用阿里图标iconfont（2022最新版详细）
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录. 选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
自己摸索阿里矢量图标iconfont的用法之阿里图标怎么用（最简单）（多图预警）
话不多说,直接先上干货. 第一部分:阿里图标iconfont怎么用. 1,登录阿里图标官网 https://www.iconfont.cn/ 2,登录. 没号可以先注册.用微博或者GitHub登录的. ...
layui树组件(扩展为带有图标的layui树组件)
项目场景: 说起来layui前端框架,做后端开发的也是再熟悉不过了,模块开发,友好的UI界面,对前端后端人员都十分友好,当然,文档和示例也算是相当完备了.但是在开发项目时会遇到这样一种情况,就是想实现 ...
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一．图标字体图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序 ...

Layui+阿里ICON，扩展图标|ICONFONT+

Layui+阿里ICON，扩展图标|ICONFONT+

Layui+阿里ICON，扩展图标|ICONFONT+相关推荐

最新文章

热门文章