CSS之通过伪元素添加图标字体

最新推荐文章于 2024-08-09 16:06:18 发布

极客研究者

最新推荐文章于 2024-08-09 16:06:18 发布

阅读量2.1k

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105574211

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

这里使用的是Font Awesome图标字体库

通过伪元素设置图标字体：
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fab:
font-family: ‘Font Awesome 5 Brands’

fa,fas:
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./icon/css/all.css">
    <title>图标字体</title>
    <style>
        div{
            margin:100px 500px;
        }
        p::before{

            /*图标字体对应的unicode编码 
            比如对应的图标类:fa fa-heartbeat
            */
            /* content:'\f21e'; */
            /* content:'\f368'; */
            content:'\f0f8';
            /* font-family:'Font Awesome 5 Brands'; */
            /*在all.css中查找图标类(fa,fas,fab)的样式*/
            font-family:'Font Awesome 5 Free';
            font-weight: 900;
            color:green;
            margin-right:10px;
        }
    </style>
</head>
<body>
    <div>
    <!-- <i class="fa fa-heartbeat"></i> -->
    <p>今夕何夕兮</p>
    <p>搴舟中流</p>
    <p>今日何日兮</p>
    <p>得与王子同舟</p>
    <!-- <i class="fa fa-wheelchair"></i> -->

    <!-- 通过实体来使用图标字体
         &#x图标编码
         
         包含元素要添加对应的图标类
    -->
     <span class="fa">&#xf193 </span>

</div>
</body>   
</html>