vue font-icon 圖標

一、vue 遊覽器左上角小圖標

把.ico文件放在根目錄下的static文件夾下，而後link標籤引入 <link rel="shortcut icon" href="./static/favicon.ico">

二、引入font文件並使用font圖標(例：font-awesome css)

（1）把font文件放入到文件夾

 

（2）建立font.css  修改（如其餘修改url文件名）

@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont-v=4.7.0.eot");
  src: url("../fonts/fontawesome-webfont-.eot#iefix&v=4.7.0")
      format("embedded-opentype"),
    url("../fonts/fontawesome-webfont-v=4.7.0.woff2") format("woff2"),
    url("../fonts/fontawesome-webfont-v=4.7.0.woff") format("woff"),
    url("../fonts/fontawesome-webfont-v=4.7.0.ttf") format("truetype"),
    url("../fonts/fontawesome-webfont-v=4.7.0.svg#fontawesomeregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

 （3）main.js 引入font.css

 

import './common/font-awesome/css/font-awesome.min.css'

注意：同級（./）上級（../）

（4）網頁中使用

<i class="fa fa-navicon"></i>

fontawesome圖標css參考連接:http://fontawesome.dashgame.com/