爲BlueLake主題增長自定義icon圖標

1、前言

hexo 的 Bluelake 主題是我一直在用的，簡單大方，很喜歡。但最近有了添加自定義 icon 圖標的需求，好比，添加 「地址」、「掃一掃」、「優惠券」 等 icon，仍是頗有必要研究一下如何製做的。

而後我就去了主題做者 chaooo 的 github 上留言，諮詢其方法，做者回復的很快，按照做者的回覆，成功將自定義圖標製做出來了，也分享給有須要的人。

<!--more-->

2、阿里媽媽圖標庫

官網地址：www.iconfont.cn/

icon 圖標使用指南：https://github.com/chaooo/hexo-theme-BlueLake/issues/99 ，在這裏我是參考的 font-class 引用。

一、新建項目

首先經過 github 或 新浪微博 帳號登陸 阿里媽媽圖標庫；而後，點擊 圖標管理 -> 個人項目 -> 新建項目，以下圖所示：

二、選圖標

新建好項目以後，選擇 菜單欄 裏面的 圖標庫，將喜歡的圖標添加到購物車。以下圖所示：

而後點擊右上角的購物車標誌，將圖標添加到剛纔新建的項目中。

三、下載項目

返回到 個人項目，點擊 「下載至本地」 按鈕，進行下載。以下圖所示：

下載文件的目錄結構以下圖所示：

其中，iconfont.css 文件爲入口文件，裏面是各圖標的 class 樣式。

四、將文件添加到BlueLake主題中

1）iconfont.css 文件依賴於如下 5 個文件：

• iconfont.eot
• iconfont.svg
• iconfont.ttf
• iconfont.woff
• iconfont.woff2

在 BlueLake 主題中的 source 目錄下新建 iconfont2 目錄，將上述 5 個文件拷貝到該目錄下。

2）而後將 iconfont.css 文件的內容稍微修改一下，並拷貝到 style.styl 文件中：

@font-face
  font-family: "iconfont2"
  src: url('../iconfont2/iconfont.eot?t=1578237521570')
  src: url('../iconfont2/iconfont.eot?t=1578237521570#iefix') format('embedded-opentype'), url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('../iconfont2/iconfont.woff?t=1578237521570') format('woff'), url('../iconfont2/iconfont.ttf?t=1578237521570') format('truetype'), url('../iconfont2/iconfont.svg?t=1578237521570#iconfont') format('svg')

.iconfont2
  font-family: "iconfont2" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

.iconlocation:before
  content: "\e651"

.iconscan:before
  content: "\e689"

.iconsaoyisao:before
  content: "\e649"

.iconmail:before
  content: "\e7bd"

.iconwe_light:before
  content: "\e7d7"

.iconyouhuiquan:before
  content: "\e8c0"

PS：記得必定要指定依賴文件的路徑喲！

五、預覽

設置圖標，替換 class 參數便可。好比：

i(class='iconfont2 iconscan')

在博客的根目錄下，執行 hexo s 來預覽圖標效果。

六、部署上傳到github

若是以爲預覽效果能夠，那麼咱們就能夠將主題部署上傳到 github 上了：

# 清空編譯目錄
hexo clean
# 生成編譯文件並部署
hexo d -g

3、成品展現

下圖是我定義了一個 掃一掃 和 優惠券 的圖標，很應景吧。那麼你也趕快動手製做吧。

另外，若是有朋友對副業電商感興趣的，能夠找我諮詢，我帶你入門，能賺會省！！！

---

點關注，不迷路

好了各位，以上就是這篇文章的所有內容了，能看到這裏的人呀，都是 人才。

白嫖很差，創做不易。 各位的支持和承認，就是我創做的最大動力，咱們下篇文章見！

若是本篇博客有任何錯誤，請批評指教，不勝感激 ！

本文來自： 微信公衆號【大數據實戰演練】。閱讀更多精彩好文，歡迎關注微信公衆號【大數據實戰演練】。