layui图标倒转180度_layui使⽤iconfont
layui的图标取⾃于阿⾥巴巴的⽮量图标库 Iconfont，同样的，这篇教程也是基于Iconfont进⾏扩展。
第⼆步，通过右上⾓的⽤户图标，授权登陆⼀个账号，在此我选择使⽤Github作为登陆账号。
第三步，登陆完成后，让我们稍微了解下基本的操作。
Iconfont提供了⾮常多的图标库，有官⽅的图标资源，也有⼀些第三⽅的素材。选择⽅式多种多样，更能集成⼀些彩⾊图标到项⽬中，在此
我们选择「多彩图标库」⾥的「多⾊⾦融商务⼩图标」，作为我们案例。
通过⾯板的操作，我们能轻松收藏/下载各类图标，也能将这些图标像「添加到购物车」⼀般加⼊到⼀个项⽬。
将浏览的图标都放⼊购物车，创建⼀个项⽬。
第四步，在添加完⼀个项⽬后，我们来熟悉⼀下对项⽬的管理和操作
设置项⽬信息，修改图标的FontClass前缀为「layui-extend-」
这是，修改保存后的效果图。
第五步，选择集成⽅式。
Iconfont提供了两种集成⽅式，⼀种是通过⽣成在线的CDN资源进⾏集成，好处就是维护起来⾮常⽅便。⼀个项⽬会有⼀个唯⼀的地址且
不变，仓库更新后也能直接引⽤⽽忽略更新的问题。另⼀种⽅式则是下载到本地集成，好处是便于保证整个项⽬的完整度和保留各类版本。
仁者见仁，智者见智，我选择了下载⽂件的⽅式进⾏集成。icon图标库
在点击下载到本地按钮后，我们得到了⼀个ZIP包。从layui官⽹下载框架最新版本，两者解压后放在同⼀个⽬录，⽬录结构如下。
第六步，在layui⽬录下的 css/modules 下新建⼀个名为layui-icon-extend的⽬录，将字体⽬录中的以 iconfont开头的⽂件拷贝进去。
第七步，开始写代码了
在页⾯引⽤中引⽤ layui-icon-extend 下的 iconfont.css⽂件，然后就可以使⽤「 iconfont layui-extend-xxxx 」的⽅式引⽤图标了。
@font-face {font-family: "iconfont";
src: url('?t=1553749761811'); /* IE9 */
src: url('?t=1553749761811#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-
8;base64,d09GMgABAAAAAAPcAAsAAAAACAAAAAOPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEBINEATYC format('woff2'),
url('iconfont.woff?t=1553749761811') format('woff'),
url('f?t=1553749761811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1553749761811#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;
}
.layui-extend-quexianicon:before {
content: "\e605";
}
在上⾯的样式中，iconfont指的是 iconfont.css 中的样式名。
为避免冲突，⼀般不推荐修改。当然，如果你引⽤了较多iconfont上的项⽬，也是可以修改的。注意：千万不要修改为layui-icon，会和 layui⾃带的图标冲突！！

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