图标字体——CSS

_洋

已于 2022-04-12 19:09:37 修改

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： css3

于 2022-04-12 18:11:58 首次发布

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124126845

版权

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

文章目录

图标字体（iconfont) 的引入
字体图标的使用——fontawesome
结合伪元素使用图标字体
通过实体使用图标字体
阿里图标

图标字体（iconfont) 的引入

在网页中经常需要使用一些图标
eg：
在这里插入图片描述

可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。

字体图标的使用——fontawesome

下载

下载网站：https://fontawesome.com/
在这里插入图片描述

解压

将`css`和`webfonts`文件夹移动到项目中

注意css和webfonts必须在同一个文件夹下
在这里插入图片描述

将all.css引入到网页中

    <link rel="stylesheet" href="./font/css/all.css">

使用图标字体

-直接通过类名来使用图标字体
格式： class=”fas/fab 图标名字“可以改变图标字体的大小和颜色

eg：

class="fas fa-bell"
class="fab fa-accessible-icon"

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./font/css/all.css">
</head>
<body>
    <i class="fas fa-bell"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-spinner fa-pulse" style="font-size: 100px; color: cornflowerblue;"></i>
</body>
</html>

输出：
在这里插入图片描述

fontawesome的底层实现原理还是使用的是 @font-face

结合伪元素使用图标字体

步骤：

找到要设置图标的元素通过before或after选中
在content中设置字体的编码
通过查表找到后面的编码：
设置字体样式

fab:

 font-family: 'Font Awesome 6 Brands'; 
 font-weight: 400;

fas:

 font-family: 'Font Awesome 6 Free';
  font-weight: 900;

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./font/css/all.css">
    <style>
        li{
            list-style: none;
        }
        li::before{
            /* 编码，使用转义字符 */
            content: '\f52d';
            /* 设置字体:将fab或fas的字体样式和font-weight写过来，在css/all.css中查找 */
            /* fab */
            /* font-family: 'Font Awesome 6 Brands'; 
            font-weight: 400; */
            /* fas */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: cornflowerblue;
            
            margin-right: 10px;

        }
    </style>
</head>
<body>
    <ul>
        <li>
            少小离家老大回
        </li>
        <li>
            乡音无改鬓毛衰
        </li>
        <li>
            儿童相见不相识
        </li>
        <li>
            笑问客从何处来

        </li>
    </ul>
</body>
</html>

输出：
在这里插入图片描述

通过实体使用图标字体

通过实体来使用图标字体： @#图标编码;
需要引入fab、或fas类

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <link rel="stylesheet" href="./font/css/all.css">
</head>
<body>
    <!-- 
        通过实体来使用图标字体；
        @#图标编码;
     -->
    <span class="fas">&#xf0f3;</span>
    
</body>
</html>

输出：
在这里插入图片描述

阿里图标

https://www.iconfont.cn/
阿里图标库种有很多图标，可以直接下载图片，作为图片引用，这里说一下作为图标使用的方法。

选择合适的图标，加入购物车
点击右上角的购物车，将刚才的图标添加到项目。

选择下载至本地，解压。
在你写的项目中新建文件夹，将从刚才下载的除.html外的文件都放到该文件夹种：

引入iconfont.css

     <link rel="stylesheet" href="./你文件的名字/iconfont.css">

引入之后就可以正常使用了。
也是上面的三种使用方法：

类
实体
伪元素
刚才下载的文件中里面的html就有对应的使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="./alfont/iconfont.css">
     <style>
         i.iconfont{
             font-size: 100px;
         }
         p::before{
             content: '\e60f';
             font-family: 'iconfont';
             font-size: 100px;
         }
          p::after{
             content: '\e610';
             font-family: 'iconfont';
             font-size: 100px;
         }
     </style>
</head>
<body>
<!-- 实体 -->
<i class="iconfont">&#xe60b;</i>
<i class="iconfont">&#xe60c;</i>

<!-- 类 -->
<i class="iconfont icon-tubiao_shijian"></i>
<i class="iconfont icon-tubiao_jinrong-chuxuguan"></i>

<!-- 伪元素 -->
<p>hello</p>
    
</body>
</html>