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

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

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

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

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/fontello.css" type="text/css" />
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/fontello-ie7.css" type="text/css" /><![endif]-->

最后在你需要使用图标的地方插入类似<i class="icon-xxx"></i>的代码即可。其中icon-xxx为你下载的那个图标字体所包括的图标的具体名称。如此而已,效果见本站右侧。


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/web-design-icon-fonts-simple-way/

已有5条评论