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