Hexo-使用阿里iconfont圖標
Hexo系列文章已經完成上傳:
一、Hexo准備---Node.js、Vue
二、Hexo、主題、部署上線
三、Butterfly美化
四、Hexo之更換背景及透明度
五、Hexo-使用阿里iconfont圖標
六、PicGo:搭建圖床
七、Hexo-域名設置+收錄
因為使用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;
}
成果圖:
