相对于图片,字体图标的体积更小、扩展性更强、兼容性更高、也更灵活,在网页设计和软件开发中的应用十分广泛。像目前的许多wordpress响应式主题就采用了icon font设计,可以大大降低服务器的http请求,加快网页访问速度。那么如何使用字体图标呢?通常有三种方法:
想要获取免费图标字体,可以参考下面几篇文章:
一、直接将字符写在HTML文件中。
此方法简单、直观。用一个元素去包含一个字符“s”(即是字母“s”),然后给这个添加一个类。该字母在选定的字体中被映射到一个特定的图标。代码如下:
- <a href="shopping-cart.php"><span class="icon">s</span> View Cart</a>
为显示效果,还需编写样式类:.icon来决定此字符以哪种字体风格来显示,代码如下:
- .icon {font-family: 'your-chosen-icon-font';}
这是个简单的例子,但通常用字母当作为字符时,携带的信息量较少。字母可以被屏幕阅读器读取,而有时你只是想仅作为图片被看到而已。
二、通过css来生成内容。
我们可以不直接在html文件中添加字符,而是用css来生成字符内容。代码如下:
- <a href="shopping-cart.php" class="icon cart"> View Cart</a>
可以看出,添加了一个类名“cart”。神奇的事就发生在css中,跟上面一样,第一步先定义好字体,然后使用:before伪元素来产生字符图标,其中“before”表示字符出现在左边,“after”则出现在右边。
- .icon { font-family: 'your-chosen-icon-font';} .cart:before {content: "s"; }
同样是需要使用字母s来映射出图标,只不过区别是移除了HTML标签换用了CSS样式实现。这是好事,但是,屏幕阅读器还是会读出字母的,这样子也不是很好。
三、使用“data-icon”属性
和上面类似的方法是使用html5的“data-”属性,接下来创建一个data-icon属性。
- <a href="shopping-cart.php" class="icon" data-icon="s"> View Cart</a>
同上,我们也将添加需要的字体font-family,然后通过使用data-icon来创建字母(字符),如:
- .icon {font-family: 'your-chosen-icon-font';} .icon:before {content: attr(data-icon);}
但是这样写还是会出现跟上面一样的问题,屏幕阅读器还是会读出字母的。
更好的 Data-Icon 方法
尝试去优化上面提到的Data-Icon方法,一是用类似的图标代表某个字符;二是直接使用标准的图标图片。
第一种做法,给当前元素添加一个新的属性:aria-hidden,并赋值为“true”。
- <a href="shopping-cart.php"><span aria-hidden="true" data-icon="s"></span>View Cart</a>
aria-hidden=”true”是为了防止被阅读器直接把字符读取出来,但是也不是对所有的平台都奏效。
再结合一些搭配使用的css属性,可以写成如下代码:
- [data-icon]:before {font-family: your-chosen-font; content: attr(data-icon);speak: none;}
最后一个 speak: none,其实具体作用不是很可靠,写上只是为了以防万一,如果用上,就可以派上用场了。
关于使用图标字体的优缺点可以参考:使用图标字体的优点与缺点