现在的位置: 首页 > 网络采风 > 正文

Fontastic:在线创建自己的图标字体,免费享用图标字体云服务

2014年09月10日 网络采风 ⁄ 共 834字 ⁄ 字号 暂无评论 ⁄ 阅读 412 次

在之前的文章中,本站已分别介绍过FontelloIcoMoon两个自定义图标字体在线生成网站,今天再来介绍一个优秀的免费字体图标生成应用:Fontastic

在Fontastic的字体库中含有多达9000个免费图标可供生成选择和下载。此外,Fontastic还提供了一个全新的图标字体云服务(免费用户5000次/月),生成的图标字体会托管到Amazon S3主机上,调用时会提升网页加载速度,并且如果对Fontastic上的图标做出修改,它会即时更新到你的网站。下面简单说下如何通过Fontastic的在线应用创建图标字体。

1、打开网址:http://fontastic.me 输入信箱和密码注册成为Fontastic的用户。

注册fontastic

2、注册完成后,自动跳转到Fontastic的在线应用:http://app.fontastic.me,在这里可以选择图标进行制作,选定的图标会以黄色边框呈现,再点一下会取消选择。

fontastic图标字体在线应用

3、如果图标不合适,还可以从字体库中添加,或者导入自己的图标字体(仅限SVG格式)。

向fontastic中导入自己的svg图标

4、可以根据需要点击“修改字体”来设置字体名称和CSS class前缀。

fontastic字体设置

5、点击“自定义”分别设置图标字体的“CSS类映射”和“字符映射”。

fontastic图标字体自定义设置

6、点击“发布”系统自动生成你的自定义 Icon Font(支持EOT,SVG,WOFF,TTF四种格式) 和 SVG Sprite 压缩包,你可以手动下载,然后应用到网站中,也可以使用代码通过图标字体云来调用。

Fontastic:在线创建自己的图标字体,免费享用图标字体云服务

7、如果想手动调用图标字体,可以解压下载的字体包,复制“fonts”文件夹到网站根目录,再将styles.css中的CSS代码复制到网站样式表中。

手动调用fontastic图标字体

8、参考字体包中的icons-reference.html文件代码,在网站HTML页面调用对应的CSS class或data-icon tag即可。

fontastic图标字体HTML应用

 

说明:本文所用图片均通过谷歌浏览器翻译制作。如果你对图标字体还不够了解,可以参考以下几篇文章。

图标字体的制作方法

图标字体的优点与缺点

图标字体的使用方法

给我留言

留言无头像?


×