前端学习笔记62-iconfont

最新推荐文章于 2024-07-18 18:41:00 发布

小欣CZX

最新推荐文章于 2024-07-18 18:41:00 发布

阅读量104

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116381533

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记62-iconfont

登录
选择想要的
添加至项目
查看自己的项目
下载
解压
使用1-实体
使用2-类
使用3-伪元素

国内有一个图标字体库iconfont，它相比之前那个它更丰富。
但是用法比较不同，之前那个我们一次性下载下来，然后查文档就能用了。但是阿里的iconfont则是用哪个下载哪个。还有一个问题就是版权不清晰。

选择想要的

如果我们选择的彩色的，则直接下载为图片使用，因为图标字体是单色的。如果选择的是不是彩色的，则将图标加入购物车(注意，不是下载)。

添加至项目

打开购物车，然后点击添加至项目
在这里插入图片描述
没有项目的话自己创建一个。

查看自己的项目

在这里插入图片描述

下载

在这里插入图片描述

解压

解压后里面的html文件会说明如何使用

使用1-实体

把解压得到的文件放在我们写的html文件的同个目录下，这里我和视频一样，放在一个iconfont文件里。
在这里插入图片描述
然后和之前一样，引入

<link rel="stylesheet" href="./iconfont/iconfont.css">

完整代码

<!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="./iconfont/iconfont.css">
    <style>
    </style>
</head>
<body>
    <span class="iconfont">&#xe61c;</span>
</body>
</html>

在这里插入图片描述
如何改字体大小呢？

    <style>
        span.iconfont{
            font-size: 100px;
        }
    </style>

使用2-类

打开下载的文件里的html文件，找到font class
在这里插入图片描述

就可以找到每个图标的类名。

    <span class="iconfont icon-qitalaji"></span>

使用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">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        p::before{
            content:'\e625';
            font-family: "iconfont";
            font-size: 10px;
        }
    </style>
</head>
<body>
    <p>Hello</p>
</body>
</html>

在这里插入图片描述

小欣CZX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端学习笔记62-iconfont

前端学习笔记62-iconfont登录选择想要的添加至项目查看自己的项目下载解压使用1-实体使用2-类使用3-伪元素国内有一个图标字体库iconfont，它相比之前那个它更丰富。但是用法比较不同，之前那个我们一次性下载下来，然后查文档就能用了。但是阿里的iconfont则是用哪个下载哪个。还有一个问题就是版权不清晰。登录这个网站需要登录选择想要的如果我们选择的彩色的，则直接下载为图片使用，因为图标字体是单色的。如果选择的是不是彩色的，则将图标加入购物车(注意，不是下载)。添加至项目打开购物车
复制链接

扫一扫