字体图标的使用

概念

概念：以图标展示的字体（和字体一样可以改大小和颜色）

网站资源

iconfont-阿里巴巴图标库
icomoon官网
bootstrap （这三个够用了）

阿里巴巴图标库的使用

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .icon1 {
        font-size: 100px;
        color: red;
      }
      .icon2 {
        color: brown;
        font-size: 66px;
      }
    </style>
  </head>
  <body>
    <!-- 
      2.通过i标签承接字体图标
        类名：
          第一个类名是固定的：iconfont;
          第二个类名：通过html文件，直接去复制文字下方的类名即可
     -->
    <i class="iconfont icon-hanbao icon1"></i>
    <span class="iconfont icon-hanbao2 icon2"></span>
  </body>
</html>

实现步骤

找到阿里巴巴字体库官网点击图标加入购物车
下载代码
找到下载好的字体图标压缩包（下载记录有）
解压到所需要使用的文件的根目录里（别乱放）
点开iconfont 找到 demo_index.html 运行起来
在点击 Font Class 复制好图标下的类名（类名（.icon-hanbao2）里的 . 不能复制）
用引入 iconfont 里的 iconfont.css 文件
尽量用行内小标签添加类名使用
有三种使用方法（上面都有教程会用一种其他的基本都可以自己看看教程使用）

svg 文件上传图标

也可以用字体图标 svg 文件上传字体图标使用

空间转换

样式 transform：（+属性）；

位移

transform： translateX;
transform： translateY;
transform： translateZ; (默认情况下看不见元素在 Z 轴上的变化)
transform： translate3d;

旋转

transform：rotateX; 取值（数字+ deg）
transform：rotateY;
transform：rotateZ;
transform：rotate3d （ X, Y, Z, 角度（数字+deg ））;

空间缩放

目标：使用scale实现空间缩放效果

语法

div {
transform: scaleX(倍数); 

 transform: scaleY(倍数); 

 transform: scaleZ(倍数); 

 transform: scale3d(x, y, z);
}