Muse-UI Icon

迷途小學生發表於2019-01-18
UI

  相信很多人第一次使用Muse-UI的話都覺得它的icon就是一個坑。如果不好好配置，專案出問題是分分鐘的事。作為一個資深(cai bi)的Muse-UI 使用者，今天我就教一下大家如何在專案中配置Muse-UI的Icon.

                                   Muse-UI Icon

  上面這個截圖是我個人專案的一個截圖，大家可以看到紅色框框框住的部分，本來是個圖示，但是由於圖示沒有配置好，變成了笨笨的文字。其實官網上是有說如何配置的，大家可以參考下下面的截圖：

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. 重啟專案。

                                     Muse-UI Icon

  最終效果是不是bling bling的，如果大家有什麼其他的問題，也歡迎提問，共同探討~~


相關文章