mui如何添加自定义icon图标

﹏ヽ暗。殇╰゛Y 2022-12-18 10:53 201阅读 0赞

**浏览器访问阿里巴巴图标库网**  
[https://www.iconfont.cn/][https_www.iconfont.cn]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center]  
**下载代码：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center 1]  
**修改css**

1.  为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
2.  只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

**原css为：**

@font-face { font-family: "iconfont";
      src: url('iconfont.eot?t=1603698027865'); /* IE9 */
      src: url('iconfont.eot?t=1603698027865#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANkAAsAAAAAB8QAAAMXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDKIJlATYCJAMMCwgABCAFhG0HOhuvBhHVmwvIfh44xtoRK+tqjx8neB1W1Ei6z0E82X1V9+sZ7x5EzT9jwezgSIphhIymAQKmxm7NWTWUEyZqsiRrRx79Q54K+UvTQfYD//3P5fTuKmqDzf9eHks45qSxJmZpHFBAYwyLIiuyhLRleG2X6rDuQwE+pdWkOnbuORAXA12mADVz2pRxuBkzpqFY4aKwK/Ya1G4sXL1F3wR2Bd9XP6ifCxpLoA/1ndxpIm0/D/08WaI4YqREJKZzAuIhEKAmMKBGV7qHIlGsJsHX1aY528ag0FMF45hAbCht9ocHGgXKhhaGAFRFlb4oiSNONJNBetXVAoANYj4bgDQoqSAuC6tgodCY17ibliWfuVLaCkz6kSDPtmMlop+cdWnM1sKTU7YWnLj/YEpmkSmp2wpNOpCeNjHcmpJIDZK2HYj2D5ToRZIOpK1I3rq/oA3CccalFnFSUpYmO3nmJiH/RIofbt0fHRhCHBZg/uaGRFHdWFKqp6gl+aP8SxSeK/HGTc6A+53q++WftVigc+sufNr0W4X/uUnr817z6j92b+S/5HmBAjecaYLpZt6UAJ03nenwUL6L0eN8I99NGq3tUe+iO9i96AU71IdBUfWoyOnT/sX8F33s866ja9Fvz1f9hsmMBWJxRmRNlFhmSNt/9Rx7zydfG5On5W83MAC8uJQzI2jrnoeLBlHyZ1RmMoTckFGzGE1YLe1ahNAL675b8PGBGPz5vR6uL3T3CYVLoQQ0DqVAcKmIGkJNsAhoCDYubcCnhi6HAwqYj6CMB1S3gYAir1OgSeYqCHndQg3hFVgU9gts8ibgY787nLl3LO5OjErQgv5DNDQ52ya7sPiOfhkUp2UB4408xyA0ZZ1P3nBCnmLD/PGtiAPHNMKVPIbDQJCZEhopg0juqspVvak0NBY7JwwpAllA+wORQSbOGyx2hc/fIW8xULihq877htgsjg4apboDelNPnbpu5ZXZh9cSwgEOIyNwJU40sBgBuXpWggxRCgMiWafCXq6rulxeO77fIcBHz5O0EmVYXU2+X9ZakY6OqSgAAA==') format('woff2'),
      url('iconfont.woff?t=1603698027865') format('woff'),
      url('iconfont.ttf?t=1603698027865') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('iconfont.svg?t=1603698027865#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;
    }
    
    .icon-cangku:before { 
      content: "\e666";
    }
    
    .icon-baobiao:before { 
      content: "\e658";
    }

**修改后为：**

@font-face { 
        font-family: iconfont;
        font-weight: normal;
        font-style: normal;
        src:  url('../fonts/iconfont.ttf') format('truetype'); /* iOS 4.1- */
    }
    .iconfont { 
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-cangku:before { 
      content: "\e666";
    }
    
    .icon-baobiao:before { 
      content: "\e658";
    }

**将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中引用刚生成的字体图标，我们以选项卡为例，代码如下：**

**底部导航修改前**

**底部导航修改后**

**效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center 2]

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/c54343acdb314492843605abe2836fc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/9b46ed49b6794fb888395ef38b801613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/6a60cdb7b9134900856a7b9c5aa74c67.png