mui 之 icon 图标

说明

mui 使用的是 字体图标,有官方自定义的图标,也能使用第三方图标库。

内置图标地址:https://dev.dcloud.net.cn/mui/ui/#icon

使用

只需要引入 两个类

  • 使用图标:mui-icon
  • 使用图标样式:mui-icon-名称
    <div class="mui-icon mui-icon-qq"></div>
    

mark

使用官方扩展图标

使用扩展图标需要导入扩展

扩展包官方地址:https://dev.dcloud.net.cn/mui/mui-icon-extra/index.html

使用

在对应目录引入css/mui-icon-extra.cssfonts/mui-icons-extra.ttf

首先引入样式

<link href="css/icons-extra.css" rel="stylesheet"/>

使用

<!-- 注意这里是 mui-icon-extra  -->
<span class="mui-icon-extra mui-icon-extra-heart-filled"></span>

使用第三方字体库

导入第三方需要的文件,根据第三方提供的教程使用就好。

阿里字体库:https://www.iconfont.cn

发表评论 / Comment

用心评论~