15.①精灵图(background-position:-x -y；)②字体图标iconfont的下载和使用、新字体图标追加③禁止文本或字体图标被选中user-select: none④三角小图标制作

目录

为什么需要精灵图

​

一：精灵图

1.获取小图标的宽，高，x,y轴信息，写负数。

​2.background-position:-x  -y;

二.字体图标的下载和使用

1.外网下载https://icomoon.io/

2.阿里巴巴免费下载https://www.iconfont.cn/

 ​

 三.新字体图标的追加

1.导入原来的图标为了区别要添加的新图标

          2.导入想要的新图标​

 四.三角小图标的制作

原理：给一个盒子设定长高为0，再设定boder值和各个边的颜色出现以下情况：

 所以如果我们想获得一个三角的做法就是，让其他几个三角变成透明transparent;

 五.京东小三角定位案例

---

为什么需要精灵图

一：精灵图

1.获取小图标的宽，高，x,y轴信息，写负数。

2.background-position:-x  -y;

二.字体图标的下载和使用

1.外网下载https://icomoon.io/

2.阿里巴巴免费下载https://www.iconfont.cn/

下载以后解压缩，然后将文件夹里面的fonts文件夹拖到和网页的同级目录

如何使用？打开

 复制这些

复制字体声明到页面的CSS里面

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?so0zpl');
  src:  url('fonts/icomoon.eot?so0zpl#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?so0zpl') format('truetype'),
    url('fonts/icomoon.woff?so0zpl') format('woff'),
    url('fonts/icomoon.svg?so0zpl#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

然后打开这个页面

 复制后面的小方块填写到代码span中

 给span声明的字体要和@font-face的font-family 一模一样

实际演示：

 

 三.新字体图标的追加

1.导入原来的图标为了区别要添加的新图标

①选择图标然后点击左上角的 import icons 

 ②找到原先的文件夹，打开.json

 2.导入想要的新图标

 四.三角小图标的制作

原理：给一个盒子设定长高为0，再设定boder值和各个边的颜色出现以下情况：

 所以如果我们想获得一个三角的做法就是，让其他几个三角变成透明transparent;

简写： 

 五.京东小三角定位案例