在mui中引入自定义的字体图标

Posted sujianfeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在mui中引入自定义的字体图标相关的知识,希望对你有一定的参考价值。

  字体图标可以到阿里巴巴矢量图上下载。

  将下载好的iconfont.ttf放进mui/dist/fonts里面。在mui.css中加入以下代码。

@font-face {
    font-family: Muiicons;
    font-weight: normal;
    font-style: normal;
    src: url(‘../fonts/icon.ttf‘) format(‘truetype‘);
}
<!-- 从阿里巴巴矢量图上选好图标下载下来后,会包括一下代码,引入后,就能使用了 -->
.icon-myshouye:before { content: "\e605"; }

.icon-myhuiyuan:before { content: "\e636"; }

.icon-myicon-:before { content: "\e64b"; }

.icon-mygaiicon-:before { content: "\e6cf"; }

        <span class="mui-icon icon-myshouye"></span>    //这样就能调用了

  

以上是关于在mui中引入自定义的字体图标的主要内容,如果未能解决你的问题,请参考以下文章

MUI的字体图标

ionic4 添加自定义字体图标

08.uni-app自定义扩展图标

自定义样式的 MUI 图标按钮不适用于工具提示

flutter 使用字体图标

在 Flutter 包中使用自定义图标字体显示问号而不是自定义图标