.icon { font-size: 20px; }
上述代码基本实现了图标的大小设置。设置成合适的值后,就可以开始添加图标了。以下假定希望添加一个图标“home”,下面是添加方法:
home
在span标签中添加“icon”是为了让浏览器知道这是一个图标,其实任何一个标签都行。在span标签中输入要添加的图标名称即可完成添加。
上述添加方法缺点在于不同浏览器对不同的字体和字体文件的支持不同。想要更好的浏览器兼容性,可以使用字体库。常见的字体库有FontAwesome和Ionicons,在网站中使用的话,需要先引入相关文件:
以上是FontAwesome的引入方法,Ionicons也类似。引入后可以像下面这样使用:
其中,fa是Fontawesome图标库的前缀,后面接具体的图标名称即可。同理,Ionicons也有类似的前缀ion,使用方法也基本相同。