移动web字体图标使用

最新推荐文章于 2025-04-01 09:47:31 发布

zouzhuangz

最新推荐文章于 2025-04-01 09:47:31 发布

阅读量217

点赞数 3

文章标签：前端 html 开发语言

本文链接：https://blog.youkuaiyun.com/Heimaxiaozou/article/details/125860648

版权

使用方法

1.进入iconfont-阿里巴巴矢量图标库网站,添加需要的素材到我的项目,下载至本地并解压.

2.将解压的fonts文件导入vscode.

引入方式:

一.类名引入方式

1.引入字体图标的css .

2.写一个标签,给它加固定类名iconfont

<!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>
    <!-- 1.引入字体图标的css -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <!-- 2.写一个标签,给它加固定类名iconfont -->
    <span class="iconfont icon-gouwuche"></span>
    <div class="iconfont icon-sousuo"></div>
    <i class="iconfont icon-jiantou"></i>
    <em class="iconfont icon-xiangzuojiantou"></em>
</body>
</html>

二. Unicode生成方式

1.引入字体图标的css .

2.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>
    <!-- 引入css  -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <!-- 2.写一个固定类名  再加上特殊字符代码 -->
    <i class="iconfont">&#xe662;</i>
    <div class="iconfont">&#xe63f;</div>
</body>
</html>

三.伪元素生成字体图标

1.给标签添加一个伪元素,content属性为fonts文件中iconfonts.css里的.icon-gouwuche:before的content内容.

<!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>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        i::after{
            content: '\e662';
        }
        div::after{
            content: '\e63f';
        }
    </style>
</head>
<body>
    <i class="iconfont"></i>
    <div class="iconfont"></div>
</body>
</html>