只需一招教萌新快速了解字体图标如何使用

前端阿亮

于 2022-06-10 20:56:42 发布

阅读量97

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_44787688/article/details/125227943

版权

css html5 css3 前端

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.引入iconfont.css

本地引入

<!-- 1.引入字体图标的样式 -->
<link rel="stylesheet" href="./fonts/iconfont.css" />

线上引入

<!-- 1.引入字体图标的样式 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3391737_27qg05rp516.css" />

2.使用字体图标

class的方式

<!-- 2.使用字体图标 -->
<i class="iconfont icon-auto font"></i>
<i class="iconfont icon-auto font"></i>
<i class="iconfont icon-auto font"></i>
<i class="iconfont icon-auto font"></i>
<i class="iconfont icon-auto font"></i>

unicode的方式

<!-- 2.使用字体图标 -->
<i class="iconfont">&#xe6eb;</i>
<i class="iconfont">&#xe742;</i>
<i class="iconfont">&#xe743;</i>
<i class="iconfont">&#xe744;</i>
<i class="iconfont">&#xe750;</i>

伪元素的方式

<style>
  i::before {
    content: '\e742';
  }
  span::before {
    content: '\e7b2';
  }
</style>
<!-- 2.使用字体图标 -->
<i class="iconfont"></i>
<span class="iconfont"></span>