61图标字体的其他使用方式

最新推荐文章于 2024-08-13 20:49:10 发布

广东码农

最新推荐文章于 2024-08-13 20:49:10 发布

阅读量50

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117899087

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

本文介绍了如何利用Font Awesome图标字体库将HTML列表的小点替换为自定义图标。通过设置`content`属性为图标的Unicode编码，调整`font-family`和`font-weight`，可以在CSS伪元素中实现此效果。此外，还展示了直接在HTML中使用图标字体实体的方式。

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

我们查font awesome文档找到一个我们想要用的图标
在这里插入图片描述

然后它的编码是\f70c，font-family属于Font Awesome 5 Free，然后font-weight是多少的话去all.css里面查font-face；
在这里插入图片描述

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标字体的其他使用方式</title>
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <style>
        /* 取消所有自带样式 */
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        /* 第一种方法：这个方法只能在伪元素当中用，不知道为什么 */
        li::before {
            content: '\f70c';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
        }
    </style>
</head>
<body>
    <!-- 
        ul的每个li前面都有一个小点，我们怎么把这个小点换成其他图标呢？
        答案是：用到伪元素。然后用图标字体
     -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    /* 第二种方法：先class引用对应的类fa（上面查的），然后用实体&;，中间用#xf206，#x是固定写法，f206是图标对应编码 */
    <span class="fa">&#xf206;</span>
</body>
</html>