Iconfont 图标库使用

最新推荐文章于 2024-08-21 15:16:29 发布

爱吃一块五花肉

最新推荐文章于 2024-08-21 15:16:29 发布

阅读量507

点赞数

分类专栏： javascript 文章标签： js css

本文链接：https://blog.csdn.net/yyanglirong/article/details/114079431

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近项目里要用阿里巴巴图标库里的图标，碰到了多色的图标，引进来是一个颜色的，样式不太一样，这里做个小笔记，避免遗忘~（成都今天降温了，好冷哈哈哈哈）

1.普通图标，单色图标引入

在这里插入图片描述
首先将选中的图片加入自己的购物车，新建到项目中

然后在资源管理中，我的项目中查看

<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">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2386914_b3lexjql71.css" />
    //引入css样式文件
</head>
<body>
    <div style="width: 200px;height: 300px;">
        <i class="iconfont icon-hongbao1"></i> //class属性必须加iconfont，否则只会显示一个小方框
    </div>
</body>

2.多色图标

上述方法都是一样的，先引入css文件，然后
在这里插入图片描述
下载到本地之后，引入js文件

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2386914_b3lexjql71.css" />
    <script src="iconfont.js"></script>
    <style>
        .icon {
            width: 4em;
            height: 4em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div style="width: 200px;height: 300px;">
        <i class="iconfont icon-hongbao1"></i> //普通图标，单色图标
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-hongbao1"></use> //多色图标
          </svg>
    </div>
</body>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

爱吃一块五花肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录