dfsa57375fd.jpg

Yilia主题自带是社交图标比较少，这里给出一种简单、
不用 webpack 打包的方式，添加自己需要的社交图标。

1、找到自己需要的图标素材

可以是图片，也可以去一些矢量图标库去找图标素材，这里推荐阿里巴巴矢量图标库：点这里

QQ截图20190811171500.png

2、打开 yilia\source\fonts 目录

QQ截图20190810202753.png

找到这四个文件，复制其中的iconfont.xxxxx.svg文件备用。

3、打开百度字体编辑器：点这里

4、新建项目、导入刚才的iconfont.xxxxx.svg和你找到的图标素材(图片或者svg等)

QQ截图20190810202121.png

5、修改字形信息

选中社交图标，点左上方的字形信息

QQ截图20190810202225.png

填好社交图标的`unicode`(注意格式，这里是$开头)和`名字`并记下来，一会要用到。

6、保存、下载项目

点左上角的zip下载压缩文件
QQ截图20190810202516.png

7、解压、重命名、替换文件

注意解压得到的这四个文件，把他们重命名为第2步里 yilia\source\fonts 目录的那4个同样后缀的文件，然后粘贴替换掉那4个文件。

QQ截图20190810202721.png

8、修改yilia\source目录下的main.xxxx.css文件

末尾添加代码：

    .icon-图标名:before{content:"图标unicode"}
    /* 之前的图标unicode，开头的$改成\,如 $E6C --> \E6C */
    #header .header-nav .social a.图标名{background:自定义颜***order:3px solid 自定义颜色}
    #header .header-nav .social a.图标名:hover{border:3px solid 自定义颜色}

重新部署即可。