在项目中引入icon

最新推荐文章于 2024-04-03 00:01:46 发布

NO x ONE

最新推荐文章于 2024-04-03 00:01:46 发布

阅读量1k

点赞数 1

分类专栏： 🌈 其他 🌈 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/Xiaoyc7/article/details/125016874

版权

🌈 其他 🌈 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引入外部Icon

示例采用的是阿里矢量图标库

1.选择所需icon并添加到项目中

将所有需要的icon添加入库
在这里插入图片描述

点击顶部购物车图标

在这里插入图片描述

点击添加至项目,合并添加的icon到创建过的项目中或者新建一个项目
在这里插入图片描述

2.将生成图标库下载到本地

点击下载至本地,并解压
在这里插入图片描述

文件目录如下：
在这里插入图片描述

3.在web项目中使用icon

假如要使用全选这个icon

对应unicode编码
在这里插入图片描述

对应font-class

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEIfS8kO-1653711797301)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20220528122020233.png)]$
再来看看要引入的iconfont.css

@font-face {
  font-family: "iconfont"; /* Project id 3434668 */
  src: url('iconfont.woff2?t=1653710624498') format('woff2'),
       url('iconfont.woff?t=1653710624498') format('woff'),
       url('iconfont.ttf?t=1653710624498') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 最主要的部分 */
.icon-quanxuan:before { /* 全选Icon，class为icon-quanxuan，content对应的是unicode编码*/
  content: "\100d9";
}

.icon-shouye:before {
  content: "\100da";
}

.icon-fenlei:before {
  content: "\100db";
}

.icon-bianji:before {
  content: "\100dc";
}

.icon-xiaoxi:before {
  content: "\100dd";
}

.icon-riqi:before {
  content: "\100de";
}

引入iconfont.css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 引入iconfont.css -->
  <link rel="stylesheet" href="iconfont.css">
  <style>
    .box4{
      color:pink;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <!-- 方式1 -->
  <div class="box2 icon iconfont">&#x100da;</div>
  <!-- 方式2 -->
  <div class="box1 icon iconfont icon-quanxuan"></div>
  <div class="box3 icon iconfont icon-fenlei">全部分类</div>
  <div class="box4 icon iconfont icon-bianji">编辑</div>
</body>
</html>

页面展示如下
在这里插入图片描述

NO x ONE

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
在项目中引入icon

引入外部Icon示例采用的是阿里矢量图标库1.选择所需icon并添加到项目中将所有需要的icon添加入库点击顶部购物车图标点击添加至项目,合并添加的icon到创建过的项目中或者新建一个项目2.将生成图标库下载到本地点击下载至本地,并解压文件目录如下：3.在web项目中使用icon假如要使用全选这个icon对应unicode编码对应font-class再来看看要引入的iconfont.css@font-face { font-family: "iconfont"
复制链接

扫一扫