web移动端布局知识点

web移动端布局第一天：
（一）字体图标
1、建立一个文件夹，命名为fonts，将其放在根目录下。
2、在已经解压的iconfonts文件中复制iconfont.css，iconfont.ttf，iconfont.woff，iconfont.woff2四个文件，将其放入fonts文件夹中。
3、通过link标签引入iconfont.css文件，然后进行字体图标的引入，有三种方式可以进行引入。
3.1、通过类名来进行引入，在每个字体图标下都有对应的类名，将这个类名放在标签class属性里面，前面要加上字体图标声明，例：＜span class=“iconfont icon- icon- text1”＞＜/span＞，其中iconfont是字体图标声明，不可以忘记。
3.2、通过编码（unicode）来进行引入，在每个字体图标下都有对应的编码，将这个编码用标签包含起来，在标签的class属性里面写上iconfont属性值，就可以完成字体图标的引入，例：＜span class=“iconfont”＞&#xe66b＜/span＞，iconfont属性值必不可掉。
3.3、通过伪元素来进行引入，在content属性里面加上代码，代码所处位置位于iconfont.css文件里面，找到对应的字体图标，如：.icon- hide：before｛content：“\e673”；｝其中\e673就是代码，在伪元素的content属性里面加上此代码，然后再加上font- family：iconfont；这个属性一定要写，三种引入方式该属性都必须要进行书写。
⚠️如果要引入字体图标可以用＜i＞＜/i＞标签来进行字体图标的包裹 书写link标签引入iconfont.css文件时，要将该link标签写在其他css样式的最前面，注意css的覆盖问题。