字型圖示使用方法

        字型圖示最大的優點就是可以用程式碼修改樣式,看過幾個關於使用字型圖示的教學視訊,我認為最重要的還是學會根據開發人員提供的demo來學習使用,這篇文章主要是講學習的方法.

      第一步,下載字型.

      先從網上下載字型圖示https://icomoon.io/#icons-icomoon ,點選下載,下載完成後會形成一個壓縮包IcoMoon-Free-master.zip,解壓找到如圖檔案

            然後將font資料夾剪切出來儲存至使用的路徑中,開啟font資料夾,會發現名為IcoMoon-Free.ttf的字型庫檔案,目前ttf格式各大瀏覽器支援的比較好.

      下面是重點:

1.用文字編輯器開啟font資料夾中的Reference.html,觀察發現html檔案中使用了一個css樣式檔案.

2.對應路徑,開啟css檔案,會發現一段特殊的程式碼,猜想應該就是設定字型的,而且src明顯就是設定字型路徑的:

下面這個.icon類,一看就是使用了這個字型,因此對應icon類中的標籤肯定使用了字型圖示,因此我們在使用字型圖示的時候,就需要把這段CSS程式碼拷貝到自己的html文件中,並把src內路徑改為自己下載下來的.ttf檔案路徑;

3.最重要的一步,用瀏覽器開啟之前下載字型檔案中的demo.html,找到自己所需要的圖示,例如home:,點選選中e906後面空白部分,藍色位置處,複製這段空白;

把這空白處複製的內容貼上到需要圖示的標籤中,如div中,<div class="icon">  </div>,粘貼後標籤內還是空白,這是正常的.設定標籤的樣式名為icon,執行程式碼,大功告成!