Write the Code. Change the World.

8月 15

我能用上这个Fontello图标字体要感谢  的推荐及耐心帮助。

图标字体,即将常用的一些网页设计图标如社交网站的logo转换成字体,就像其它网站字体一样,使用CSS@font-face在web浏览器里展示。使用图标字体的好处不言而喻,类矢量图像的效果,可以任意的放大缩小,特别是ipad和mac等Retina屏幕,使用常规的图标效果不好。

对于常用的图标字体,网上已经有很多免费开源的,但怎么使用还是需要花点时间去学习,不过Fontello网站提供了最简单的方法。该网站收集了目前几乎所有的开源免费的图标字体,进入该网站后,简单的点击选择你需要使用的那些图标,然后点击右上角Download webfont,便可以打包下载所有类型(包括eot, svg, ttf和woff)的图标字体和网页加载需要的CSS。然后将解压得到的font和css两个文件夹上传到你的Wordpress当前主题模板的目录文件夹里,并在主题模板的<head>…</head>之间加入如下代码(第二行适用于支持IE7):

最后在你需要使用图标的地方插入类似<i class=”icon-xxx”></i>的代码即可。其中icon-xxx为你下载的那个图标字体所包括的图标的具体名称。

这里罗列了本站使用的所有图标(经测试多说评论显示不出来)

参考:网页设计使用图标字体的一个简单方法

Fontello官网:http://fontello.com

Fontello GitHub项目主页:https://github.com/fontello/fontello

发表评论

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

活捉 17 条