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

图标字体的使用方法

2014年08月23日 网络采风 ⁄ 共 1603字 ⁄ 字号 暂无评论 ⁄ 阅读 257 次

相对于图片,字体图标的体积更小、扩展性更强、兼容性更高、也更灵活,在网页设计和软件开发中的应用十分广泛。像目前的许多wordpress响应式主题就采用了icon font设计,可以大大降低服务器的http请求,加快网页访问速度。那么如何使用字体图标呢?通常有三种方法:

图标字体的使用方法

想要获取免费图标字体,可以参考下面几篇文章:

12个免费图标字体资源网站推荐

七个高清图标字体搜索引擎推荐

一、直接将字符写在HTML文件中。

此方法简单、直观。用一个元素去包含一个字符“s”(即是字母“s”),然后给这个添加一个类。该字母在选定的字体中被映射到一个特定的图标。代码如下:

  1. <a href="shopping-cart.php"><span class="icon">s</span> View Cart</a>

为显示效果,还需编写样式类:.icon来决定此字符以哪种字体风格来显示,代码如下:

  1. .icon {font-family: 'your-chosen-icon-font';}

这是个简单的例子,但通常用字母当作为字符时,携带的信息量较少。字母可以被屏幕阅读器读取,而有时你只是想仅作为图片被看到而已。

二、通过css来生成内容。

我们可以不直接在html文件中添加字符,而是用css来生成字符内容。代码如下:

  1. <a href="shopping-cart.php" class="icon cart"> View Cart</a>

可以看出,添加了一个类名“cart”。神奇的事就发生在css中,跟上面一样,第一步先定义好字体,然后使用:before伪元素来产生字符图标,其中“before”表示字符出现在左边,“after”则出现在右边。

  1. .icon { font-family: 'your-chosen-icon-font';}  .cart:before {content: "s"; }

同样是需要使用字母s来映射出图标,只不过区别是移除了HTML标签换用了CSS样式实现。这是好事,但是,屏幕阅读器还是会读出字母的,这样子也不是很好。

三、使用“data-icon”属性

和上面类似的方法是使用html5的“data-”属性,接下来创建一个data-icon属性。

  1. <a href="shopping-cart.php" class="icon" data-icon="s"> View Cart</a>

同上,我们也将添加需要的字体font-family,然后通过使用data-icon来创建字母(字符),如:

  1. .icon {font-family: 'your-chosen-icon-font';} .icon:before {content: attr(data-icon);}

但是这样写还是会出现跟上面一样的问题,屏幕阅读器还是会读出字母的。

更好的 Data-Icon 方法

尝试去优化上面提到的Data-Icon方法,一是用类似的图标代表某个字符;二是直接使用标准的图标图片。

第一种做法,给当前元素添加一个新的属性:aria-hidden,并赋值为“true”。

  1. <a href="shopping-cart.php"><span aria-hidden="true" data-icon="s"></span>View Cart</a>

aria-hidden=”true”是为了防止被阅读器直接把字符读取出来,但是也不是对所有的平台都奏效。

再结合一些搭配使用的css属性,可以写成如下代码:

  1. [data-icon]:before {font-family: your-chosen-font; content: attr(data-icon);speak: none;}

最后一个 speak: none,其实具体作用不是很可靠,写上只是为了以防万一,如果用上,就可以派上用场了。

关于使用图标字体的优缺点可以参考:使用图标字体的优点与缺点

给我留言

留言无头像?


×