iconfont的使用

一、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>

输出:

 注意:引入的图标相当于是一种新的文字,可以使用文字样式更改的方法来更改。

举例:

.baocun {

        /* 多类名选择器 引入的图标相当于是一种新的字体 可以使用字体属性更改 */

        color: red;

        font-size: 30px;

    }

输出:

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值