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代码 */
CSS_iconfont
- &# xe7ec;新浪微博
- &# xe63b;QQ空间
- &# xe615;腾讯微博
- &# xe630;购物车
4.font class引用 测试代码
CSS_iconfont
- 新浪微博
- QQ空间
- 腾讯微博
- 购物车
5.symbol引用 测试代码
/* 引用iconfont使用说明 */
CSS_iconfont
6.CSS sprites雪碧图，将多张图片、图标等合并为一张整图，然后通过 background-position 进行背景图片定位
Sprites图片整合可以有效减少服务器请求次数，从而提高页面加载效率
整合图片的小工具网上有很多，PC端和在线的都有，可以自动生成CSS代码，操作便捷
sprites测试代码如下（通过Satyr Sprite工具整合图片，感谢工具作者http://shen.li/blog/post/C_sharp/CSS_Satyr.html）
CSS_sprites
壹
贰
叁
肆
伍
7.滑动门，利用CSS背景图像的可层叠性，通过元素宽度的可伸缩性创建特定的动态效果
通过滑动门技术，设计的导航菜单兼具传统布局的呈现效果，但菜单的扩展性更强，可以根据内容多少自动调节
CSS_滑动门
联系我们
8.微信PC端官网导航栏制作
WeChat_nav
