CSS字体图标添加、三角形的做法

精灵图放大缩小会失真，字体图标不会。

字体图标：展示的是图标，本质是字体。

• 轻量级：一个图标字体要比一系列图像要小，一旦字体加载了图标就会渲染出来，减少服务器请求；
• 灵活性：本质其实是文字，可以随意调整大小，颜色，阴影等；
• 兼容性：几乎所有浏览器都支持。

总结：

• 如果遇到一些结构和样式比较简单的小图标，可用字体图标。
• 如果遇到一些结构和样式比较复杂的小图标，就用精灵图。

一、字体图标的下载：

1.阿里妈妈字体库：https://www.iconfont.cn/（免费）

2.https://icomoon.io/ （免费）

二、三角的做法

根据需要，设置想要的方向的三角形。

 .triangle {
      width: 0px;
      height: 0px;
      /* border: 10px solid red; */
      border: 10px solid transparent;
      border-top: 10px solid springgreen;
      /* border-bottom: 10px solid steelblue;
      border-left: 10px solid tomato;
      border-right: 10px solid violet; */
    }

实例一、带三角的框

   .jd{
      position: relative;
      width: 100px;
      height: 249px;
      background-color: thistle;
    }
    .jd .triangle1{
      position: absolute;
      top:50%;
      right: 0;
      margin-right: -29px;
      width: 0;
      height: 0;
      /* 为了照顾兼容性 */
      line-height: 0;
      font-size: 0;
      border: 15px solid transparent;
      border-left-color: thistle ;

    }


  <div class="jd">
    <span class="triangle1"></span>
  </div>

效果：