handsome自定义扩充iconfont图标及配色教程

本文只针对handsome主题，也是综合了在hexo和部分typecho主题中引入矢量图标的经验及网络上已有教程进行经验总结分享交流，有出入的地方还望大家指出，共同交流进步。

handsome图标介绍

handsome主题在配置文档中一共介绍了四种图标库的引入配置方法，分别是 1.glyphicon字体图标 2.主题内置的部分iconfont图标 3.主题内置的部分fontello图标 4.全部的feather图标 同时也介绍了两种扩充图标库的方法: 1.通过引入公共css文件来引入fontawesome图标库全部图标 2.通过修改字体文件config.json及css文件中相关标签来扩充fontello图标 上面的图标配置方法主题文档介绍的很详细，不做赘述，下面就如何扩充iconfont图标给大家做介绍。

扩充iconfont图标

效果预览:||| 原理很简单，是通过font-class引入，图标引入方法官网是有介绍的官网介绍，这种引入方法的优缺点也有介绍， 1.兼容性良好，支持ie8+，及所有现代浏览器。 2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 3.因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 4.本质上还是使用的字体，所以多色图标还是不支持的，即使有多色图标也会自动去色。当然图标库官方也介绍了一种引入多色图标的方法，但由于这种图标在不修改源代码的情况下无法在后台侧边栏直接配置，只能在文章中引入，应用范围很小，本文便不做赘述，感兴趣的可以去上面官网自己看。本文在引入纯色图标后针对增加纯色配色总结了两种方法，继续往后看

如何引入图标库

引入方法同fontawesome图标引入一样，也是通过引入css，那么这个css去哪找呢？怎么引入呢？ 1.注册登录iconfont矢量图标库官网，搜索选择自己想要引入的所有图标(颜色复杂的多色的图标在引入配置后会自动去色，不建议使用)，点击添加入库。 2.选择右上角的购物车图标，把刚才选择的图标添加到项目，没有项目的可以自己新建项目(名称随意)

3.在资源管理/我的项目里点击生成font-class的css代码并复制，在handsome后台的开发者设置/自定义输出head头部的HTML代码，通过引入css样式的方法引入此代码,注意https:后面替换为你自己的项目css

<link href="https://at.alicdn.com/t/font_3148935_8xwxkbnijd9.css" rel="stylesheet">

图标库的引入就结束了，但要注意新的图标添加到项目后想要配置后显示，需要更新css并以同样的方式引入到后台，接下来就是如何配置图标了。

配置图标

1.左侧边栏导航图标配置

{
        "name": "QQ",
        "class": "iconfont icon-xxx",
        "link": "https://www.ascv.cn/34.html",
        "target":"_self"
    }

xxx替换成你项目里图标的名称（见上图红框），class属性里按照上面写的话引入的是纯色图标，若想要显示颜色，第一种方法是配置的时候class属性这样写"class": "iconfont icon-xxx text-danger",，这样写的话该图标就是红色，但这种方法颜色种类有限制,共有下面几种 light:白色 primary:紫色 info:蓝色 warning:黄色 danger:红色 success:绿色 dark:深色 black:黑色 要想使用常见的16进制（#FFFFFF）或10进制（RGB）的颜色需要用到下面方法：在后台自定义css样式里给每个图标按照下面方法添加自定义样式,下面给出常见的这两种css自定义方法。

.icon-xxx{color:#d81e06;}
.icon-wechat{color: rgb(105,187,100);}

项目里的图标的RGB颜色数值可借鉴我的方法，登录QQ，按截屏组合键ctrl+Alt+A,鼠标移动上去就会显示该图标的RGB值。如果有更方便的方法欢迎在评论区留言。

2.文章段落内引入图标

<i class="iconfont icon-weixin"></i>
<i class="iconfont icon-QQ"></i>
<i class="iconfont icon-shejiaotubiao-44"></i>
<i class="iconfont icon-tubiaozhizuomoban"></i>

对照：

项目css可以共用哦，如果你感觉自己的项目的图标很完美，可以在评论区分享css供大家使用哦 ，也可以把项目所有图标截图+css代码邮件给我,稍后会新建独立页面分享出来供大家选择