iconfont图标引入

最新推荐文章于 2022-12-21 14:50:59 发布

weixin_45274554

最新推荐文章于 2022-12-21 14:50:59 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/weixin_45274554/article/details/119484918

版权

字体图标

字体图标库使用webFont原理，加载一个图标就像加载一个字体一样，通过控制字体大小、字体颜色来控制图标的大小与颜色。
目前比较流行的开源字体图标库有
- iconfont http://www.iconfont.cn/
- font-awesome http://fontawesome.dashgame.com/

iconfont使用步骤

打开iconfont网站 https://www.iconfont.cn/
搜索要使用的图标
将喜欢的图标加入到购物车，前提是需要登录iconfont
打开购物车，点击“下载代码”
下载后，将对应的文件夹放到项目目录下

在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

/* 在<head>标签内引入 */
<link rel="stylesheet" href="./font_jcx62njyfg/iconfont.css">

/* 在<body>标签内使用 */
/* xxx在文件夹下的iconfont.css页面中，复制过来就可以了 */
<i class="iconfont icon-xxx"></i>

iconfont多色图标使用步骤

搜索或选择多色图标
选择合适的图标加入购物车
打开购物车，点击“添加至项目”，没有项目创建即可
在项目中选择symbol，生成线上链接或下载到本地

引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

/* 在<head>标签中加入以下代码 */
<style>
  /* 加入通用css代码（引入一次就行） */
  .icon {
     width: 1em; height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
  }
</style>

/* 线上引入 */
/* 记得在前面加上http或https，不知道用哪个可以都试一下 */
<script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>

/* 本地引入 */
<script src="./font_2723033_472uiy994m2/iconfont.js"></script>
    
/* 在<body>标签内使用 */
/* xxx在上图页面把鼠标移入图标进行复制 */
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

weixin_45274554

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iconfont图标引入

字体图标字体图标库使用webFont原理，加载一个图标就像加载一个字体一样，通过控制字体大小、字体颜色来控制图标的大小与颜色。目前比较流行的开源字体图标库有iconfont http://www.iconfont.cn/font-awesome http://fontawesome.dashgame.com/iconfont使用步骤打开iconfont网站 https://www.iconfont.cn/搜索要使用的图标将喜欢的图标加入
复制链接

扫一扫