扩展 layui icon 图标库为阿里图标库或Font Awesome

r囧r小猫 2022-05-04 00:25 2215阅读 0赞

鉴于Layui 140个图标可能不太够用，所以这里我们需要扩展下  
分别试了 [Font Awesome][] 和 [阿里的IconFont][IconFont] ，其他图标库应该是通用的

首先Font Awesome 这里用的4.7，5.0+emmm是要买授权了嘛。。。不知道，阿里库就挺好的挺丰富反正  
需要先引入font-face（扩展其他库也要这样）

@font-face {
        font-family: 'FontAwesome';
        src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
        src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
        url('/assets/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
        url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
        url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
        url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

接着覆写layui-icon这个类

.layui-icon {
        font-family: layui-icon, FontAwesome!important;
    }

然后起名字，layui-icon-fa这样用于区分layui的icon，后缀用font awesome的名字，因为使用fontclass的形式，所以后面的Unicode是我们需要的  
![在这里插入图片描述][70]

.layui-icon-fa-bandcamp:before{
        content: '\f2d5';
    }

使用的时候和layui icon的使用方法一致

<i class="layui-icon layui-icon-fa-bandcamp" style="font-size: 30px; color: red;"></i> Font Awesome

关于阿里的图标库使用就更简单了，完全不需要上述这么繁琐

1.  首先注册用户登录；
2.  图标管理里创建项目；创建项目的时候，可以这样设置，这样子前缀就和layui统一了，至于下面的Font Family改不改都行，如果更改那覆写样式的时候要改成与之对应的

![在这里插入图片描述][70 1]

1.  添加喜欢的图标到项目里；
2.  生成在线链接；选中fontclass；复制下方的代码，在页面内引入  
    ![在这里插入图片描述][70 2]
3.  覆写layui-icon这个类

.layui-icon {
        font-family: layui-icon, iconfont !important;
    }

1.  使用啦，在4步骤的那个页面种，Font Class下有对应图标的class名直接复制使用即可

<i class="layui-icon layui-icon-ali-add" style="font-size: 30px; color: black;"></i> Ali IconFont

**最后效果图：**  
分别是Font Awesome、Layui Icon、阿里库（同Font Awesome方式引入）、阿里库（上述描述方式）  
![在这里插入图片描述][70 3]

> [https://fly.layui.com/jie/42581/][https_fly.layui.com_jie_42581] layui社区帖子地址

[Font Awesome]: http://www.fontawesome.com.cn/
[IconFont]: http://www.iconfont.cn/
[70]: /images/20220504/c3c35e9b384d47818f0dbcceb2f66aad.png
[70 1]: /images/20220504/bf47a67dae3c4d21975c8158feed89dc.png
[70 2]: /images/20220504/172d2c34e0524b329be1a033048d127e.png
[70 3]: /images/20220504/4dddc486aa3d4022a081f8d9033e7c6e.png
[https_fly.layui.com_jie_42581]: https://fly.layui.com/jie/42581/