iconfont的使用

最新推荐文章于 2024-06-17 17:09:00 发布

鱼鱼～

最新推荐文章于 2024-06-17 17:09:00 发布

阅读量1.1k

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_57310897/article/details/129267534

版权

一、iconfont是什么？

是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具

二、iconfont的使用

进入iconfont的主页，并且注册登录。

选择需要的图标，并且加入购物车

在购物车就可以看见我们刚刚选择的图标，然后添加到项目中即可。

添加之后，点击下载到本地，然后打开项目的html文件

打开网页之后，根据他说的教程进行操作：

举例：

<!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>
</head>
<style>
    /* 先下载想要的图标 然后引入到html中（点击下载文件中的html文件 然后打开就有教程了） */
    @font-face {
        font-family: 'iconfont';
        /* 记得修改一下文件的地址 原文件地址：iconfont.woff2?t=1677555468289 */
        src: url('./iconfont/iconfont.woff2?t=1677555468289') format('woff2'),
            url('./iconfont/iconfont.woff?t=1677555468289') format('woff'),
            url('./iconfont/iconfont.ttf?t=1677555468289') format('truetype');
    }

    .iconfont {
        /* 引入的固定样式 我们一般不修改 要修改的话 可以用多类名选择器或者在下面另写原来的类名选择器 */
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

 
</style>

<body>
    <span class="iconfont baocun">&#xe607;</span>
    <span class="iconfont">&#xe608;</span>
</body>

</html>

输出：