移动web字体图标

种一棵树吧

已于 2022-05-05 22:36:51 修改

阅读量145

点赞数

文章标签：前端

于 2022-05-05 22:35:21 首次发布

本文链接：https://blog.csdn.net/m0_68359121/article/details/124599386

版权

字体图标：iconfont

字体图标展示的是图标，本质是字体

优点:

灵活，方便修改样式颜色、字体（color，font-size）
轻量级，体积小，渲染快，降低服务器请求次数
兼容性强
使用方便

使用方法:

1.使用Unicode编码

<!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">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <title>Document</title>
    <style>
        span {
            font-family: 'iconfont';
        }
    </style>
</head>
<body>
    <span class="s1">&#xe8ab;</span>
    <span class="s2">&#xe8ac;</span>
    <span class="s2">&#xe8ad;</span>
    <span class="s2">&#xe8ae;</span>
</body>
</html>

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">
<link rel="stylesheet" href="./01字体图标/iconfont/iconfont.css">
<title>Document</title>
</head>   
<body>
    <span class="iconfont icon-Dyanjing s1"></span>
    <span class="iconfont icon-caidan s2"></span>
    <span class="iconfont icon-anquan s3"></span>
</body>
</html>

3.在线引入

<!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">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
    <title>Document</title>
</head>
<body>
    <span class="iconfont icon-Dyanjing s1"></span>
    <span class="iconfont icon-caidan s2"></span>
    <span class="iconfont icon-dianzan s3"></span>
</body>
</html>

免费的字体图标网站：

http://www.iconfont.com

工作中：

1. 如何制作图标美工的工作需要了解
2. 前端关注如何根据拿到的图标来使用它

种一棵树吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web字体图标

字体图标：iconfont 字体图标展示的是图标，本质是字体优点:灵活，方便修改样式颜色、字体（color，font-size）轻量级，体积小，渲染快，降低服务器请求次数兼容性强使用方便使用方法:1.使用Unicode编码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
复制链接

扫一扫