text: (window.webpackJsonp=window.webpackJsonp||[]).push([[70],{490:function(t,s,a){"use strict";a.r(s);var e=a(15),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"hexo-使用阿里iconfont图标"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hexo-使用阿里iconfont图标"}},[t._v("#")]),t._v(" Hexo-使用阿里iconfont图标")]),t._v(" "),a("p",[t._v("因为使用"),a("code",[t._v("hexo")]),t._v("搭建的博客中，大家并不懂都有什么图标，"),a("code",[t._v("fa fa-xx")]),t._v("就懵了，不知道都有什么。")]),t._v(" "),a("p",[t._v("首先，"),a("code",[t._v("fa fa-xxx")]),t._v("中的"),a("code",[t._v("图标")]),t._v("可以在 "),a("a",{attrs:{href:"https://fontawesome.com/icons?d=gallery",target:"_blank",rel:"noopener noreferrer"}},[t._v("图标库"),a("OutboundLink")],1),t._v(" 中寻找。")]),t._v(" "),a("p",[t._v("(上面慢的话，可以在这个：另一个"),a("a",{attrs:{href:"https://fontawesome.dashgame.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("图标库"),a("OutboundLink")],1),t._v(")")]),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004005.png",alt:"1"}}),t._v(" "),a("p",[t._v("例如：")]),t._v(" "),a("div",{staticClass:"language-yml line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-yml"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("首页")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" / "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),t._v(" fa fa"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("home\n  "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("归档")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" /archives/ "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),t._v(" fa fa"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("archive\n  "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("标签")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" /tags/ "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),t._v(" fa fa"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("tags\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("img",{attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004037.png",alt:"2"}}),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004059.png",alt:"3"}}),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004103.png",alt:"4"}}),t._v(" "),a("p",[t._v("显而易见，就算能找到也有很多"),a("code",[t._v("图标")]),t._v("找不到，所以这个时候，我们可以选择使用"),a("code",[t._v("阿里iconfont图标")])]),t._v(" "),a("h2",{attrs:{id:"建立项目"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#建立项目"}},[t._v("#")]),t._v(" 建立项目")]),t._v(" "),a("p",[t._v("1.进入"),a("a",{attrs:{href:"https://www.iconfont.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("阿里 iconfont"),a("OutboundLink")],1),t._v(" 寻找你想要添加的图标，并且"),a("code",[t._v("添加到项目")]),t._v("。")]),t._v(" "),a("p",[t._v("2.找到你想添加的图标，将你想要添加的图标点击 "),a("code",[t._v("“添加入库”")]),t._v(" 按钮。")]),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004114.png",alt:"5"}}),t._v(" "),a("p",[t._v("3.点击右上角"),a("code",[t._v("小购物车图标")]),t._v("，这里会看到你刚刚添加的"),a("code",[t._v("所有图标")])]),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004127.png",alt:"6"}}),t._v(" "),a("p",[t._v("4.添加至项目")]),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004136.png",alt:"7"}}),t._v(" "),a("p",[t._v("5.随便起个"),a("code",[t._v("项目名字")]),t._v("，项目"),a("code",[t._v("创建成功")]),t._v("如下：")]),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004143.png",alt:"8"}}),t._v(" "),a("p",[t._v("6.生成在线链接")]),t._v(" "),a("p",[t._v("点击 "),a("code",[t._v("Font class")]),t._v(" 按钮，点击"),a("code",[t._v("查看在线链接")]),t._v("，会生成"),a("code",[t._v("在线链接")])]),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004149.png",alt:"9"}}),t._v(" "),a("ol",{attrs:{start:"7"}},[a("li",[t._v("打开"),a("code",[t._v("链接")]),t._v("，"),a("code",[t._v("红线")]),t._v("上的就是"),a("code",[t._v("调用的名称")]),t._v("。")])]),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004613.png",alt:"10"}}),t._v(" "),a("h2",{attrs:{id:"引入字体样式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#引入字体样式"}},[t._v("#")]),t._v(" 引入字体样式")]),t._v(" "),a("h3",{attrs:{id:"_1-存入css"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-存入css"}},[t._v("#")]),t._v(" 1.存入css")]),t._v(" "),a("p",[t._v("在页面中"),a("code",[t._v("右键")]),t._v("--"),a("code",[t._v("另存为")]),t._v("，存到"),a("code",[t._v("\\themes\\butterfly\\source\\css\\")]),t._v(":")]),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004835.png",alt:"11"}}),t._v(" "),a("img",{staticStyle:{zoom:"67%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004847.png",alt:"12"}}),t._v(" "),a("h3",{attrs:{id:"_2-引入文件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2-引入文件"}},[t._v("#")]),t._v(" 2.引入文件")]),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004937.png",alt:"13"}}),t._v(" "),a("h2",{attrs:{id:"使用图标"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用图标"}},[t._v("#")]),t._v(" 使用图标")]),t._v(" "),a("p",[t._v("可以在"),a("code",[t._v("\\source\\_data")]),t._v("中的"),a("code",[t._v("butterfly.yml")]),t._v("修改"),a("code",[t._v("social")]),t._v("：")]),t._v(" "),a("div",{staticClass:"language-yml line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-yml"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("iconfont icon-rss")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" /atom.xml "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("|")]),t._v(" RSS链接\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004948.png",alt:"14"}}),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004957.png",alt:"15"}}),t._v(" "),a("p",[t._v("当然图标你可以感觉会挺小的，可以在"),a("code",[t._v("保存的css文件")]),t._v("中自行修改：")]),t._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".icon-xxx:before")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\e600"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 修改颜色 */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 修改大小 */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 24px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br")])]),a("p",[t._v("这样修改会导致所有这个图标的"),a("code",[t._v("大小都会变动")]),t._v("。建议的方式是"),a("code",[t._v("重新写一个 css")]),t._v("，为其添加规则。设置时只需要多加一个"),a("code",[t._v("class")]),t._v(" 即可，例如：")]),t._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".icon-xxx:before")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\e600"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 卡片处小图标 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".card_icon")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 修改颜色 */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 修改大小 */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 24px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br")])]),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207005007.png",alt:"16"}}),t._v(" "),a("p",[t._v("成果图：")]),t._v(" "),a("img",{staticStyle:{zoom:"80%"},attrs:{src:"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207005017.png",alt:"17"}})])}),[],!1,null,null,null);s.default=n.exports}}]);