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

最新推荐文章于 2022-10-14 11:14:36 发布

Lhy@@

最新推荐文章于 2022-10-14 11:14:36 发布

阅读量488

点赞数

分类专栏： HTML/CSS/H5/JavaScript 文章标签： css

本文链接：https://blog.csdn.net/Lhy_JL/article/details/114025482

版权

HTML/CSS/H5/JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文探讨了字体图标在设计中的优势，如轻量、灵活性和兼容性，以及何时使用它们（结构简单的小图标），并与精灵图（复杂结构的解决方案）进行对比。还介绍了阿里妈妈和Icomoon等字体图标库的获取方法，以及如何通过CSS创建三角形实例。

摘要由CSDN通过智能技术生成

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

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

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

总结：

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

一、字体图标的下载：

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>

效果：