网站现在很流行 icon 直接从字库中引用，这个东西怎么修改呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3482 天前的主题，其中的信息可能已经有所发展或是发生改变。

字库

引用

icon

15 条回复 • 2016-07-26 22:52:59 +08:00

1etters

2015-05-22 14:44:50 +08:00

示例代码：.icon-renren:before{content:"\f18b";}

shiny

2015-05-22 14:46:22 +08:00

我们用 iconfont.cn ，要改内容就自己上传 svg 文件生成 font

1etters

2015-05-22 14:53:31 +08:00

@shiny 我用的这个叫Font Awesome，但是目前需要的图标缺不少

chairuosen

2015-05-22 14:56:02 +08:00

我们也用 iconfont.cn 自己做。在这赞一个这网站

1etters

2015-05-22 14:57:55 +08:00

@chairuosen 那Font Awesome有没有办法

chairuosen

2015-05-22 14:59:38 +08:00

@1etters 把字体转成svg，加入新svg 重新做

1etters

2015-05-22 15:01:51 +08:00

@chairuosen 这东西好多文件！FontAwesome.otf fontawesome-webfont.eot fontawesome-webfont.svg
fontawesome-webfont.ttf fontawesome-webfont.woff

chairuosen

2015-05-22 15:13:48 +08:00

@1etters 把那个svg给设计让他拆成一个一个的就可以

1etters

2015-05-22 15:16:15 +08:00

@chairuosen 明白了

Phariel

2015-05-22 15:20:34 +08:00

https://icomoon.io/

lingyired

2015-05-22 15:20:42 +08:00

@1etters 懒的话， fontawesome 不用改，继续引入。然后自己做一份扩展的。只要 CSS classname 以及 unicode 不冲突就可以了。

1etters

2015-05-22 15:27:29 +08:00

@lingyired 哥们你有没有发现我这个很奇怪，代码中都是数字的，我以前用过的都是fa fa-wechat这样的

lingyired

2015-05-22 15:29:11 +08:00

@1etters "\f18b" 这个是 unicode , fa fa-wechat 这个是 class name

大部分情况下，都是直接使用 class name.

nanhuo

2015-05-22 18:23:01 +08:00

单独做一个svg图标，用它生成字体文件（https://icomoon.io/），然后用法就跟font awesome一样

leungwensen

2016-07-26 22:52:59 +08:00

来这个项目里找缺失的 icon 吧： http://leungwensen.github.io/svg-icon/ 你可以按需选择图标生成 SVG symbol sprite ，也可以到项目里找单独的 SVG 文件。目前 github 上几乎所有流行的 icon font 我都转换成 SVG 了，有超过 4000 个 SVG 图标可以用。坑已踩完，直接拿去用吧。有任何问题可以到项目里给我提 issue 。