2021-07-27

最新推荐文章于 2024-10-05 09:05:35 发布

kidding_z

最新推荐文章于 2024-10-05 09:05:35 发布

阅读量111

点赞数

分类专栏：字体图标使用文章标签： html5 css

本文链接：https://blog.csdn.net/kidding_z/article/details/119143049

版权

字体图标使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如何使用字体图标

1、首先我们需要根据自己的需求去寻找字体图标。
在这里给大家推荐一个字体图标库

阿里巴巴矢量图标库

2、当找到自己需要的字体图标后，在项目中打开，复制以下代码

@font-face {
  font-family: 'iconfont';  /* Project id 2505407 */
  src: url('//at.alicdn.com/t/font_2505407_wiawoasfuys.woff2?t=1627020723531') format('woff2'),
       url('//at.alicdn.com/t/font_2505407_wiawoasfuys.woff?t=1627020723531') format('woff'),
       url('//at.alicdn.com/t/font_2505407_wiawoasfuys.ttf?t=1627020723531') format('truetype');
}

到我们的style标签里面，然后再将字体图标的名字 font-family: ‘iconfont’;，复制到我们装字体图标盒子的样式里，
在这里插入图片描述
然后去复制字体图标的代码

在这里插入图片描述
把它粘贴到我们所需要的盒子里，最后我们就可以在css中改变字体图标的样式了。

完整代码如下：

  <style>
        /* 字体图标 */
        @font-face {
  font-family: 'iconfont';  /* Project id 2505407 */
  src: url('//at.alicdn.com/t/font_2505407_wiawoasfuys.woff2?t=1627020723531') format('woff2'),
       url('//at.alicdn.com/t/font_2505407_wiawoasfuys.woff?t=1627020723531') format('woff'),
       url('//at.alicdn.com/t/font_2505407_wiawoasfuys.ttf?t=1627020723531') format('truetype');
}
span{
    font-family: 'iconfont'
}
    </style>
</head>
<body>
    <span>&#xe617;</span>
</body>