最新的layui⾃定义icon图标
看了好多教程，⼀点思路也不清晰，闲话少说，直接上步骤
前提⼯作，⾃⼰下载好，注册登录好。
1、在 阿⾥巴巴⽮量图标库 选择⾃⼰的想要的icon(作者以菜单为例)
2、把该图标放置在购物车，然后点击最上⽅的购物车图标或者页⾯滑到底端右边出现的购物车图标，⽰例图如下：
添加到购物车
3、打开购物车，点击 下载代码，压缩包解压后放在你项⽬的任何位置，作者为了⽅便，⾃创了⼀个⽂件夹myicon，放在了
layui/css下⾯ 。
（⽹上⼤多数教程要把图标添加⾄项⽬⾥，这个是⾮必须的，添加之后也是要下载代码，道理⼀样的,⾄于为什么要添加到项⽬⾥，作者会在⽂章最后解释）这时候你就可以删除⼀些不必要的⽂件，如图：
4、引⼊css，把iconfont.css⽂件引⼊所需要的页⾯
<link rel="stylesheet" href="/layui/css/myicon/iconfont.css">
5、使⽤，⾸先打开iconfont.css，复制class名  (有两个class名，⼀个是公共的class，⼀个是下载的图标的class名)，在i></i>标签添加 复制的class名，然后就⼤功告成
请看以下⽰例：
.iconfont {  /*这是公共class名，必须复制*/
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-caidan:before {  /*这是第⼀个icon图标只复制icon-caidan，不要复制berore*/
content: "\e605";
}
.icon-caidan1:before { /*这是第⼆个icon图标，⽅法同上*/
content: "\e61d";
}
iconfont.css⽂件
<p><i class="iconfont icon-caidan">菜单</i></p>
<p><i class="iconfont icon-caidan1">菜单1</i></p>
你的页⾯html
解释
⽹上⼤多数教程要把图标添加⾄项⽬⾥，是为了修改class名，也就是iconfont.css⾥⾯的公共class名  i
confont 和你下载的图标class名，本⽂就是icon-caida和icon-caidan1，这些都是可以在iconfont.css⽂件⾥⾯修改，现在阿⾥巴巴⽮量图标库做了修改，不到以前的那样的设置了，⽽且只知道让改，不知道为什么这样改，作为⼀个程序员很难受。
作者为了⽅便和layui的icon保持⼀致，把iconfont.css⽂件⾥⾯iconfont  改成了layui-icon，把下载的图标class名加了前缀layui-icon，效果是⼀样的，请看下⾯的例⼦
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.
icon-caidan:before {
content: "\e605";
}
.icon-caidan1:before {
content: "\e61d";
}
/*修改iconfont名和icon图标的class名*/
.layui-icon {
font-family: "iconfont" !important;
font-size: 20px;
font-style: normal;
-
webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
}
.layui-icon-myicon1:before {
content: "\e605";
}
.layui-icon-myicon2:before {
content: "\e61d";
}
iconfont.css⽂件
<div>
<h1>iconfont</h1>
<p><i class="iconfont icon-caidan">菜单</i></p>
<p><i class="iconfont icon-caidan1">菜单1</i></p>
</div>
<div>
<h1>layui-icon</h1>
css最新<p><i class="layui-icon layui-icon-myicon">菜单</i></p>
<p><i class="layui-icon layui-icon-myicon1">菜单1</i></p>
</div>
你的页⾯html
改不改效果是⼀样的，作者还⾃定义了颜⾊和字体⼤⼩，但是呢，改成layui-icon之后发现，layui原本的icon图标不能⽤了，加载不出了，所以改不改class名⼤家应该知道怎么做了吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。