Handsome-图标列表

主题内置了大量的网页图标 (非图片格式)，用途如下：

• 在 自定义左侧边栏 、自定义顶部导航栏 和 首页名称左侧图标设置项 中使用
• 在文章中插入的按钮中使用

可用图标

handsome v4.3.1 由原来的fa fa- 修改为fontello fontello-，是为了避免与fontawesome库冲突，你可以自行引入该图标库，以便使用更多图标，但是会带来一定的加载体积。

1. 主题内置的fontello图标

注意前面需要加上fontello 前缀

• 自定义栏目配置中class 字段中填写

{"name":"相册","class":"fontello fontello-picture","link":"xxx.com","target":"_self"}

• 按钮的icon字段中填写

[button color="success" icon="fontello fontello-picture"]图标按钮文字[/button]

2. bootcss自带的Glyphicons字体图标

详细见Glyphicons 字体图标

注意前面需要加上glyphicon 前缀

• 自定义栏目配置中class 字段中填写

{"name":"图书","class":"glyphicon glyphicon-book","link":"xxx.com","target":"_self"}

• 按钮的icon字段中填写

[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]

3. 主题内置的feather图标

支持 feather的所有图标。

注意前面不需要任何前缀

• 自定义栏目class 字段中填写，下面两种方式都正确：

{"name":"笔记","class":"music","link":"xxx.com"},
{"name":"笔记","feather":"music","link":"xxx.com"}

• 按钮的icon字段中填写

[button color="success" icon="music"]图标按钮文字[/button]

4. emoji图标

注意前面不需要任何前缀，使用emoji前需要检查你的数据库编码是否支持emoji，否则会导致数据丢失问题！typecho 支持emoji的配置

• 自定义栏目配置的class 字段中填写

{"name":"笔记","class":"😄","link":"xxx.com"}

• 按钮的icon字段中填写

[button color="success" icon="❤️"]图标按钮文字[/button]

添加自定义图标

主题已经内置的图标列表，详见图标列表

如果不能满足你的图标需求，可以使用以下方法扩充主题图标：

方法一：傻瓜式扩充fontawesome图标

直接引入全套的fontawesome图标：

在主题外观设置——开发者设置——自定义输出head 头部的HTML代码，填入：

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

上面的fontawesome 的css文件来自bootcdn.css 公共cdn提供，你可以替换成自己的文件。

方法二：自定义添加iconfont图标列表

主题内置fontello图标来自网站http://fontello.com/

你可以在该网站中导入主题目录下的assets/fonts/fontello的config.json，然后重新生成字体文件。

覆盖到assets/fonts/fontello下，并且需要修改assets/css/handsome.css中形如.fontello-*:before，替换为下载的新的标签。

（难度较大，不推荐……）

版权声明

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。