教你如何把位图图标变成一个Web字体

/ 4评 / 0

4

今天闲来无事,在网上闲逛的时候发现一个很不错的东西,特来此分享,感觉用处还是很大的,特别是对于咱们这些服务器资源紧张的草根来说!

对于站长来说,网站中使用图标是必不可少的,图标技能美化网站又能让用户快速的找到各种分类,但是图标太多又着实影响网站速度,那要肿么办呢?鱼与熊掌不能兼得啊!

今天多姿就介绍一下这个鱼与熊掌同时兼得的好方法,废话不多说,下面咱们进入正题。

使用图标字体的优势

下面说说怎么样来制作Web字体

制作Web字体我们需要用的是一款名叫IcoMoon的在线应用,使用方法简单,而且界面不复杂,不懂英文你照样完成所有程序。它目前免费提供的图标打倒了3800枚,当然你也可以自己利用Adobe Illustrator设计自己需要的图标,到这里转换成Web字体。

第一步、打开IcoMoon在线应用程序,你会看到如下的界面

1

好吧,刚开始看到这个界面是不是感觉无从下手?没关系咱一步步来。

第二步、选择你需要的图标,然后转化成字体,这个不太好说明,还是看图熟悉一下界面吧

2

第三步、界面熟悉了就好办了,如果你直接在这里选择图标生成,而不是自定义的话;那么首先选择你喜欢的图标(这时上面一定要选择哪个选择工具哦,就是箭头),然后直接点击下面的“Font”按钮,然后再点下方的“Download”按钮,你选择多少他就就自动打包,等打包完成后他就自动开始下载了,完工。

下载后的压缩文件里面,包含了预览,里面含有html、css、ttf、woff、svg这些个文件,你可以直接打开index.html文件预览。

预览文件你可以看到如下内容:

3

我擦,这是不是太简单了点?很明确的告诉你,他就是这么简单!

关于自定义生成Web字体的方法将在下一个教程里面说到,好了,教程就到这里,一个字一个字的码累啊,各位要是觉得好方法好,请别忘记顶一下多姿

=============================================

如何把自己做的图标转换成web字体教程已出   请点这里

Demo:Web字体在线演示

对了icomoon的地址是http://icomoon.io/app 到这里生成!

首页是http://icomoon.io 可以获取更多其他的信息!

欢迎转载本文章,但是请带上文章的出处:http://dz9.net  谢谢!

 

4条回应:“教你如何把位图图标变成一个Web字体”

  1. kslr说道:

    整站更改有点麻烦了,不知道这样的图标可以加链接不

发表评论

电子邮件地址不会被公开。 必填项已用*标注