- A+
1.字体图标
获取途径：
① 免费网站下载字体
② 收费网站购买字体使用权
③ 自己设计字体（要有设计背景）
2.阿里巴巴 IconFont图标库
URL：https://www.iconfont.cn/home/index，需要注册账号后才能下载使用
图标下载成功后，可以通过编辑器直接调用
引用方式（以下内容摘自iconfont使用说明）：
① Unicode 引用，Unicode 是字体在网页端最原始的应用方式，特点：
兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
②
font-class 引用，是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题，特点：
兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
③ Symbol 引用，这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
3.Unicode引用 测试代码
/* CSS代码 （来自iconfont） */ @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1596700948491'); /* IE9 */ src: url('iconfont.eot?t=1596700948491#iefix') format('embedded-opentype'), /* IE6-IE8 */ url("data:application/x-font-woff2;charset=utf-8;") format('woff2'), url('iconfont.woff?t=1596700948491') format('woff'), url('iconfont.ttf?t=1596700948491') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1596700948491#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* HTML代码 */ <html> <head lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="images/icon/iconfont.css"/> <title>CSS_iconfont</title> </head> <body> <ul type="none"> <li><i class="iconfont">&# xe7ec;</i>新浪微博</li> <li><i class="iconfont">&# xe63b;</i>QQ空间</li> <li><i class="iconfont">&# xe615;</i>腾讯微博</li> <li><i class="iconfont">&# xe630;</i>购物车</li> </ul> </body> </html>
4.font class引用 测试代码
<html> <head lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="images/icon/iconfont.css"/> <title>CSS_iconfont</title> </head> <body> <ul type="none"> <li class="iconfont icon-xinlangweibo1">新浪微博</li> <li class="iconfont icon-QQkongjian1">QQ空间</li> <li class="iconfont icon-tubiaozhizuomoban">腾讯微博</li> <li class="iconfont icon-shopshoppingco">购物车</li> </ul> </body> </html>
5.symbol引用 测试代码
/* 引用iconfont使用说明 */ <html> <head lang="en"> <meta charset="utf-8"> <!-- <link rel="stylesheet" href="images/icon/iconfont.css"/>--> <title>CSS_iconfont</title> <script src="Images/icon/iconfont.js"></script> <style> .icon { width: 12em; height: 2em; vertical-align: -2.15em; /*fill: currentColor;*/ /*overflow: hidden;*/ } </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xinlangweibo"></use> <text x="110" y="30" fill="red">新浪微博</text> </svg> </body> </html>
6.CSS sprites雪碧图，将多张图片、图标等合并为一张整图，然后通过 background-position 进行背景图片定位
Sprites图片整合可以有效减少服务器请求次数，从而提高页面加载效率
整合图片的小工具网上有很多，PC端和在线的都有，可以自动生成CSS代码，操作便捷
sprites测试代码如下（通过Satyr Sprite工具整合图片，感谢工具作者http://shen.li/blog/post/C_sharp/CSS_Satyr.html）
<html> <head lang="en"> <meta charset="utf-8"> <title>CSS_sprites</title> <style> div{ width: 200px; height: 200px; border: 1px solid #55a532; background-image: url("images/number/compose.png"); float: left; margin-left: 10px; } .pic_1 {background-position: -0px -0px; width: 200px; height: 200px; } .pic_2 {background-position: -202px -0px; width: 200px; height: 200px; } .pic_3 {background-position: -405px -0px; width: 200px; height: 200px; } .pic_4 {background-position: -610px -0px; width: 200px; height: 200px; } .pic_5 {background-position: -815px -0px; width: 200px; height: 200px; } </style> </head> <body> <div class="pic_1">壹</div> <div class="pic_2">贰</div> <div class="pic_3">叁</div> <div class="pic_4">肆</div> <div class="pic_5">伍</div> </body> </html>
7.滑动门，利用CSS背景图像的可层叠性，通过元素宽度的可伸缩性创建特定的动态效果
通过滑动门技术，设计的导航菜单兼具传统布局的呈现效果，但菜单的扩展性更强，可以根据内容多少自动调节
<html> <head lang="en"> <meta charset="utf-8"> <title>CSS_滑动门</title> <style> .left{ height: 36px; /*不能设置元素宽度*/ margin: 100px 200px 0px; text-decoration: none; color: white; display: inline-block; background: url("images/tools/nav_cont.png") no-repeat; } .right{ height: 36px; padding: 0px 10px; line-height: 36px; background: url("images/tools/nav_cont.png") right; } </style> </head> <body> <a href="#" class="left"> <span class="right">联系我们</span> </a> </body> </html>
