【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )

韩曙亮

于 2023-04-20 21:56:44 发布

阅读量1k

点赞数 8

分类专栏： CSS 文章标签： css3 css 前端字体图标伪元素选择器

本文链接：https://blog.csdn.net/shulianghan/article/details/130272642

版权

CSS 专栏收录该内容

141 篇文章 36 订阅

订阅专栏

文章目录

一、icommon 字体图标基本使用
- 1、生成 icommon 字体文件
- 2、字体图标基本使用
二、使用伪元素实现 icommon 字体图标显示

一、icommon 字体图标基本使用

字体图标指的是将图标做成字体样式 , 在放图标的地方使用文字即可实现图标显示 ;

1、生成 icommon 字体文件

进入 https://icomoon.io/app/#/select 网站 , 选择 491 个字体图标 ;

在上述下拉菜单中 , 选择 Select All 选项 , 一次性选择所有的 491 个字体图标 ;

点击右下角的 Generate Font 按钮 , 生成字体图标 ,

在这里插入图片描述

生成字体后 , 点击右下角的 Download 按钮 ,

在这里插入图片描述
下载该文件 ;

在这里插入图片描述

解压该文件 , 可以得到如下内容 ;

在这里插入图片描述

将 fonts 目录拷贝到与网页同级目录中, 该 fonts 目录是字体文件所在目录 , 下面的四个文件就是字体文件 ;

在这里插入图片描述

查看 icomoon 目录中的 demo.html 网页 , 里面有字体中图标对应的编码 ;
在这里插入图片描述

下图中 , 房子对应的字体编码是 e900 , 右侧的  是字体的占位符 ;

在这里插入图片描述

2、字体图标基本使用

代码示例 :

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        @font-face {
            /* 导入字体 */
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        span {
            /* 设置字体 */
            font-family: 'icomoon';
            /* 绝对定位 , 子绝父相 , 子元素绝对定位 父容器相对定位 */
            position: absolute;
            top: 10px;
            left: 10px;
        }
        
        div {
            /* 相对定位 , 子绝父相 , 子元素绝对定位 父容器相对定位 */
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <!-- 此处的值需要从 demo.html 中拷贝出来 
             虽然在代码中是方块 但是在网页中会显示对应图片-->
        <span></span>
    </div>
</body>

</html>

显示效果 :

在这里插入图片描述

二、使用伪元素实现 icommon 字体图标显示

上述代码示例中 , 使用了字体图标 , 在 div 标签中嵌入了 span 标签 ;

如果使用伪元素 , 在其中插入标签 , 可以不使用 span 标签 , 直接插入标签即可 ;

        p::after {
            content: "\e900";
            /* 绝对定位 , 子绝父相 , 子元素绝对定位 父容器相对定位 */
            position: absolute;
            top: 10px;
            left: 10px;
            font-family: 'icomoon';
        }

代码示例 :

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        @font-face {
            /* 导入字体 */
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        span {
            /* 设置字体 */
            font-family: 'icomoon';
            /* 绝对定位 , 子绝父相 , 子元素绝对定位 父容器相对定位 */
            position: absolute;
            top: 10px;
            left: 10px;
        }
        
        div,
        p {
            /* 相对定位 , 子绝父相 , 子元素绝对定位 父容器相对定位 */
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
        
        p::after {
            content: "\e900";
            /* 绝对定位 , 子绝父相 , 子元素绝对定位 父容器相对定位 */
            position: absolute;
            top: 10px;
            left: 10px;
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <div>
        <!-- 此处的值需要从 demo.html 中拷贝出来 
             虽然在代码中是方块 但是在网页中会显示对应图片-->
        <span></span>
    </div>

    <!-- 使用伪元素选择器 向 p 标签直接插入字体 可以节省一层标签 -->
    <p></p>
</body>

</html>

显示效果 :

在这里插入图片描述

韩曙亮

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
10
评论
【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )

一、icommon 字体图标基本使用1、生成 icommon 字体文件2、字体图标基本使用二、使用伪元素实现 icommon 字体图标显示
复制链接

扫一扫