一字体图标

如何使用字体图标

前提

复制相关的文件，到 fonts文件夹里面。

引入 css

 <link rel="stylesheet" href="./fonts/iconfont.css">

1.使用类名引入字体图标（重点记住）

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

 <span class="iconfont icon-daohangdizhi"></span>

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

<!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>
  <!-- 引入字体图标css文件 -->
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <style>
    .icon-map {
      color: red;
      font-size: 30px;
    }

    .icon-fabulous {
      color: red;
      font-size: 60px;
    }
  </style>
</head>

<body>
  <span class="iconfont icon-map"></span>
  <span class="iconfont icon-fabulous"></span>
</body>

</html>

2.使用unicode编码(了解)

直接在标签内部放入一个编码

  <strong class="iconfont"> &#xe8ab; </strong>

css 要指定当前标签的文字是字体图标，必须要声明。

3.使用伪元素字体图标（记住）

 <div class="car1">购物车</div>

结构比较的清晰，省了很多的小盒子

 .car {
       width: 200px;
       height: 45px;
       border: 1px solid pink;
       text-align: center;
       line-height: 45px;
       font-family: 'iconfont';
     }
 .car::before {
     content: "\e63b";
 
 }
 .car::after {
     content: "\e686";
 }

注意：使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

小结

字体图标使用可以整体分为两大步骤：

复制相关文件到网站根目录下，并引入css文件到html页面中。
- 通常都放到fonts文件夹里面。
- 通常iconfont.css 和字体放一起。
调用。
- 开发中最常用的是使用类名来调用，所以重点记住这个就可以了
```
<span class="iconfont icon-daohangdizhi"></span>
```

二变形(transform)

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

1.位移 translate

translate可以让盒子沿着x轴或者y轴来移动。

语法

 transform: translate(x, y);
 transform: translateX(x);
 transform: translateY(y);

他和margin的区别

margin移动盒子会影响其余的盒子。把其他人挤走。

位移translate移动盒子不会影响其他的盒子,不脱标。

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度的百分比

应用-盒子的水平和垂直

可以让一个子盒子在父盒子里面水平和垂直居中。

 .inner {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 100px;
       height: 100px;
       background-color: skyblue;
       transform: translate(-50%, -50%);
     }
     /* .inner {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: auto;
       width: 200px;
       height: 200px;
       background-color: skyblue;
     } */

使用margin实现子盒子在父盒子里面水平和垂直居中。

/*父盒子*/
width:200px;
height:100px;
/*水平垂直居中*/
margin-left:-100px;
margin-yop:-50px;

/*水平居中*/
margin: 0 auto;

使用定位实现子盒子在父盒子里面水平和垂直居中

position:absolute;
left:50%;
top:50%;

2.旋转 rotate

旋转可以让盒子旋转角度。

语法：

 transform: rotate(45deg);    一定写单位deg

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点 transform-origin

/* 设置旋转的中心点位置 */
transform-origin: right bottom;

多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
```
  transform: translate(-50%, -50%) rotate(360deg);
```
注意:多个值之前用空格隔开。

3.缩放 scale

语法：

 transform: scale(1.2)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

三渐变

线性渐变

基本语法：

 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))

四、今日单词

单词	说明	实例
transform	变形、转换
translate	位移移动	transform:translate(x,y)
rotate	旋转	transform:rotate(45deg)
scale	缩放	transform: scale(1.2)；

字体图标的使用, 变形(transform), 颜色渐变

一 字体图标