CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库

最新推荐文章于 2022-10-28 00:25:45 发布

燕穗子博客

最新推荐文章于 2022-10-28 00:25:45 发布

阅读量1.5k

点赞数 3

分类专栏： CSS 文章标签： javascript css3 开发语言 vscode java

本文链接：https://blog.csdn.net/m0_64346035/article/details/124139550

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

图标字体（iconfont）

-在网页中经常需要使用一些图标，可以通过图片来引入图标，但图片本身比较大，也不灵活

-所以使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入

-这样我们就可以通过使用字体的形式来使用图标

图标库有很多，目前国内使用比较多的就是阿里巴巴图标矢量库，网址：https://www.iconfont.cn/

以后学习框架的时候，会知道框架里面也有很多的图标，可以直接使用，不过没有阿里巴巴图标多，好看。

下面介绍阿里巴巴图标库的使用

第一步：注册阿里巴巴图标库的账号，搜索自己想要的图标

第二步，将选中的图标加入到购物车内

第三步：去购物车里，将图标放入到你正在做的项目里

第四步：在项目中，可以选择下载本地文件或者复制在线网址，下面介绍怎么使用图标

代码演示图标三种使用方式

<!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.css" />
    <!-- 引入线上版本  跟上面的线下版本引入一个就可以了-->
    <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3284033_acdfm5jydfd.css" /> -->
    <style>
      p::before {
        content: "\e60f";
        font-family: "iconfont";
      }
    </style>
  </head>
  <body>

    <!-- 第一种方式 -->
    <span class="iconfont">&#xe611;</span>
    <span class="iconfont">&#xe60e;</span>
    <!-- 第二种方式 -->
    <i class="iconfont icon-jishuzhuanyi"></i>
    <i class="iconfont icon-zhijiao-copy-copy3"></i>

    <!--第三种方式 -->
    <p>一朵花</p>
  </body>
</html>

燕穗子博客

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库

图标字体（iconfont）-在网页中经常需要使用一些图标，可以通过图片来引入图标，但图片本身比较大，也不灵活-所以使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入-这样我们就可以通过使用字体的形式来使用图标图标库有很多，目前国内使用比较多的就是阿里巴巴图标矢量库，网址：https://www.iconfont.cn/以后学习框架的时候，会知道框架里面也有很多的图标，可以直接使用，不过没有阿里巴巴...
复制链接

扫一扫