分析页面
-
拿到别人的HTML页面，先分析一下页面结构。
这里就要用到Chrome的调试工具 按F12 就可以出来。（如果是笔记本，那就要右击页面点击检查）
image-20200710182752978.png
element 选项下左边这一栏是HTML代码，右边一栏是css代码。
-
查看页面对应的HTML代码 ， 先点一下小箭头，再点击你想查看的内容、
image-20200710183109146.png
- 调试手机模式 ，点击这个图标
image-20200710183200693.png
图标库推荐
Font Awesome官网：https://fontawesome.com/
一套绝佳的图标字体库和 CSS 框架。 Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
Iconfont-阿里巴巴矢量图标库 官网：http://iconfont.cn/
阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
Fontello 官网：http://fontello.com/
可以根据您的需求很轻松地制作自定义图标 webfont。
LivIcons Evolution 官网：https://livicons.com/
真正的动态 SVG 图标。 这是面向 Web 开发人员和网站所有者的产品。 LivIcons Evolution 是经典 LivIcons 包的下一代现代产品，带有交叉浏览器矢量图标，每个都有独立的迷你动画。 它们基于由 JavaScript 驱动的 SVG（可缩放矢量图形），适用于所有现代浏览器，在任何设备上都看起来很完美。 是的，Retina 也是。
Ionicons 官网：http://ionicons.com/
高级设计的图标，用于Web，iOS，Android和桌面应用程序。 支持SVG和Web字体。 完全开源，MIT由Ionic Framework团队授权和构建。
Icons - Material Design 官网：https://material.io/icons/
Google 设计团队出品，用于常见操作和项目。 在桌面上下载，在Android，iOS和Web的数字产品中使用它们。
使用Font Awesome（字体太棒了）http://www.fontawesome.com.cn/
image-20200710184039466.png
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
image-20200710184100234.png
看这个介绍感觉蛮牛逼的
如何使用？
- 下载对应的文件 v4.7（因为v5要钱QAQ）
image-20200710184232081.png
- 将解压好的文件拖到自己的项目中（这里之前视频讲错了）
image-20200710184647589.png
- HTML引入css
image-20200710184942554.png
-
开始使用
你可以通过设置CSS前缀
fa和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的<i>标签，它的语义更加精准）。<i class="fa fa-camera-retro"></i> fa-camera-retro -
寻找图标http://www.fontawesome.com.cn/faicons/
找到自己喜欢的直接点击进去，复制代码，即可使用。
image-20200710185200630.png
网友评论