1.图标字体:就是用字体代替图片
1)如:淘宝https://www.taobao.com/
(1)默认:(font-size:12px;)
(2)审查代码,看到font-size默认为12px
(3)用滚轮调整字体大小后,会有以下结果:
2)而新浪网:http://www.sina.com.cn/ 的图标就不是用这种方式解决的,而是用图片:
(1)打开url的链接,会看到左上角有这个图片:
(2)当切换到这个页面:http://sports.sina.com.cn/csl/ 的时候,会发现有一个一模一样,但是要大一些的图标:
(3)审查元素:
(4)链接图片:
所以这样就要用两次就要做两张图片,很不方便的。
2.图标字体的好处:
1)可以通过font-size调整图标的大小
2)颜色可以自由修改。
3)可以添加阴影
4)IE6也支持
图标字体的使用方法:
1)下载字体,可以通过以下网站:
国外:https://icomoon.io/
国内(阿里巴巴的):http://iconfont.cn/
进入https://icomoon.io/站点——》IcoMoon App——》点击想要的图标——》generate font——》download——》解压下载好的内容,找到fonts文件夹——>复制fonts文件夹到项目底下
2)声明字体:
根据自己使用的具体情况可以做以下调整:(url里面放的是字体的路径)
@font-face { font-family: 'testIcon'; /*该字体的名称是随便写的*/ src: url('fonts/icomoon.eot'); src: url('fonts/icomoon.eot?#iefix')format('embedded-opentype'), /*IE6-IE8*/ url('fonts/icomoon.woff')format('woff'), /*chrom firefox*/ url('fonts/icomoon.ttf')format('truetype'), /*chrom、firefox、opera、Safari、Android、IOS4.2+*/ url('fonts/icomoon.svg#uxiconfont')format('svg'); /*IOS4.1-*/ }
3)引用字体:
在1)中字体download的页面复制图标下面右侧的内容(内容有可能是透明的看不见)到页面代码中,如下:
在样式文件中设置字体的font-family为自己在声明中给定的那个字体。
具体代码示例如下:
运行效果:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体图片测试</title> <style type="text/css"> @font-face { font-family: 'testIcon'; /*该字体的名称是随便写的*/ src: url('fonts/icomoon.eot'); src: url('fonts/icomoon.eot?#iefix')format('embedded-opentype'), /*IE6-IE8*/ url('fonts/icomoon.woff')format('woff'), /*chrom firefox*/ url('fonts/icomoon.ttf')format('truetype'), /*chrom、firefox、opera、Safari、Android、IOS4.2+*/ url('fonts/icomoon.svg#uxiconfont')format('svg'); /*IOS4.1-*/ } div{ font-family: testIcon; /*font-family的名称为自己给定的那个*/ margin-bottom: 10px; } </style> </head> <body> <div></div> <!--粘贴进来就看到内容了--> <div></div> <div></div> </body> </html>
如果想要调整大小和颜色,则修改如下:
运行效果: