Hexo-使用阿里iconfont圖標

2021 年 2 月 12 日
筆記
Hexo

Hexo-使用阿里iconfont圖標

因為使用hexo搭建的博客中，大家並不懂都有什麼圖標，fa fa-xx就懵了，不知道都有什麼。

首先，fa fa-xxx中的圖標可以在圖標庫中尋找。

(上面慢的話，可以在這個：另一個圖標庫)

例如：

  首頁: / || fa fa-home
  歸檔: /archives/ || fa fa-archive
  標籤: /tags/ || fa fa-tags

顯而易見，就算能找到也有很多圖標找不到，所以這個時候，我們可以選擇使用阿里iconfont圖標

建立項目

1.進入阿里 iconfont 尋找你想要添加的圖標，並且添加到項目。

2.找到你想添加的圖標，將你想要添加的圖標點擊 「添加入庫」 按鈕。

3.點擊右上角小購物車圖標，這裡會看到你剛剛添加的所有圖標

4.添加至項目

5.隨便起個項目名字，項目創建成功如下：

6.生成在線鏈接

點擊 Font class 按鈕，點擊查看在線鏈接，會生成在線鏈接

打開鏈接，紅線上的就是調用的名稱。

引入字體樣式

1.存入css

在頁面中右鍵—另存為，存到\themes\butterfly\source\css\:

2.引入文件

使用圖標

可以在\source\_data中的butterfly.yml修改social：

  iconfont icon-rss: /atom.xml || RSS鏈接

當然圖標你可以感覺會挺小的，可以在保存的css文件中自行修改：

.icon-xxx:before {
  content: "\e600";
  /* 修改顏色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

這樣修改會導致所有這個圖標的大小都會變動。建議的方式是重新寫一個 css，為其添加規則。設置時只需要多加一個class 即可，例如：

.icon-xxx:before {
  content: "\e600";
}
/* 卡片處小圖標 */
.card_icon {
  /* 修改顏色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

成果圖：

個人博客為：
MoYu’s Github Blog
MoYu’s Gitee Blog

Tags: Hexo