Muse-UI Icon

  相信很多人第一次使用Muse-UI的话都觉得它的icon就是一个坑。如果不好好配置，项目出问题是分分钟的事。作为一个资深(cai bi)的Muse-UI 使用者，今天我就教一下大家如何在项目中配置Muse-UI的Icon.

                                   

  上面这个截图是我个人项目的一个截图，大家可以看到红色框框框住的部分，本来是个图标，但是由于图标没有配置好，变成了笨笨的文字。其实官网上是有说如何配置的，大家可以参考下下面的截图：

  但是这样配置会有个问题，就是由于资源是墙外的，正式环境下极有可能会gg.当然我不会告诉大家我就试过~~。所以最好还是把文件下载到项目中，然后进行配置。下面我来教大家配置一下：

1. 点击这个地址下载woff2文件。(将名字改成icon.woff2)
2. 点击这个地址下载CSS文件。(将名字改成material-icons.css)
   
3. 将下载好的两个文件放入项目的asset文件夹中。 
4. 打开第二部下载的CSS文件将其中的@font-face修改成如下：

  @font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'), local('MaterialIcons-Regular'), url(icon.woff2) format('woff2');
 }复制代码

   *当然如果你文件名没有按照我的，请自行修改。

   5. 在main.js中引入使用。

import './assets/font/material-icons.css'复制代码

   6. 重启项目。

                                     

  最终效果是不是bling bling的，如果大家有什么其他的问题，也欢迎提问，共同探讨~~

转载于:https://juejin.im/post/5c416c4b6fb9a049e063a0ff