CSS3-字體圖標的使用

字體圖標具有輕量、靈活、兼容性強的特點；比圖片有較好的可編輯性，佔用空間小、可複用性強，從而被廣泛使用。

下面詳細介紹一下字體圖標的下載：

• 首先要到一些字體圖標庫網站去下載需要的字體圖標，一般 阿里巴巴矢量圖標庫 中都能找到自己需要的圖標

• 進入網站後進行登錄，沒有賬號註冊後再登錄即可
  

• 登錄完成後在搜索欄中搜索自己需要的圖標或直接在圖標庫 中查找
  

• 找到需要的圖標後將其加入購物車
  

• 點擊網頁右上方的 購物車 即可查看或下載加入的字體圖標
  

• 選擇 下載代碼 將字體圖標文件下載到本地
  

字體圖標的使用：

• 解壓之前下載好的壓縮文件，複製其中的幾個文件到自己的字體文件夾中
  

• 打開 demo_index.html 文件按照上面的步驟進行操作

  第一步：在需要使用字體圖標的頁面中引入字體文件，聲明一種字體，修改文件路徑

  <style>
  @font-face {
    /* font-family 定義字體的名稱 */
    font-family: 'myfont';
    /* 引入相關文件，將路徑改爲自己的實際路徑 */
    src: url('./fonts/iconfont.eot');
    src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('./fonts/iconfont.woff2') format('woff2'),
      url('./fonts/iconfont.woff') format('woff'),
      url('./fonts/iconfont.ttf') format('truetype'),
      url('./fonts/iconfont.svg#iconfont') format('svg');
  }
  </style>
  

  第二步：設置需要使用字體圖標的標籤的 font-family 爲自己定義的字體名稱；或者直接定義一個類名，使用字體圖標時先給元素添加個類名。

  h3,
  p {
    font-family: 'myfont';
  }
  .iconfont {
    font-family: 'myfont';
  }
  

  每個字體圖標都有對應的編碼（demo_index.html 文件可查看對應編碼），將編碼拷貝到標籤中即可使用了
  

  <h3>&#xe641;</h3>
  <p>&#xe617;</p>
  <h1 class="iconfont">&#xe612;</h1>
  

  效果：
  

• 也可以使用 類+僞元素 的方式來使用字體圖標，舉個例子：

  比如想要使用 手機 圖標，可以定義一個類選擇器併爲這個選擇器添加僞元素；使用相關圖標時直接給標籤添加類名即可

  .phone::before {
  	 /* content 中的內容爲字體圖標的編碼，需要去掉前綴 &#x 和後面的分號 */
      content: '\e641';
      font-family: 'myfont'
    }
  

  <h1 class="phone"></h1>
  

• 也可以使用 font class 的方式來使用字體圖標

  首先將 iconfont.css 文件複製到項目文件夾中，然後在使用字體圖標的文件中引入該文件；通過類名的方式來使用字體圖標，需要注意的是使用字體圖標的標籤必須要添加一個前綴類名 iconfont

  主要代碼示例：

  <!-- ... -->
  <!-- 引入字體圖標樣式文件 -->
  <link rel="stylesheet" href="./css/iconfont.css">
  <!-- ... -->
  <!-- 使用字體圖標 -->
  <p class="iconfont icon-wode"></p>