欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阿里图标库iconfont前端使用

程序员文章站 2024-02-14 09:54:28
...
前端难免需要用到各种各样的图标,感觉阿里图标库里面的图标比较齐全,故写篇博客做个笔记。
  • 阿里图标库网址

  • 阿里图标库三种应用说明,这里面分别有:icon单个使用,unicode引用,symbol引用 这三种使用方式,其中symbol引用这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法,并且这种使用方式方便改图标的大小和颜色,这里面就详细介绍symbol引用这种使用方式。

symbol引用

  • 将自己需要的图标库添加到购物车中,选好所有自己需要的图标,可以自行搜索,尽量一次选齐全。
  • 阿里图标库iconfont前端使用
    -点击上图右上角红色1的购物车,将购物车中的所有图标添加到自己的项目中,如果没有项目需要新建,也可以根据项目分类,具体自己把握。
    阿里图标库iconfont前端使用
  • 然后就可以进入到自己项目中查看刚才添加的图标,然后点击到下载到本地。
  • 阿里图标库iconfont前端使用
  • 下载到本地后解压打开,可以看到这样的一个文件列表,我们需要的是 iconfont.css和iconfont.js,其中的demo_index.html也有三种应用方式的说明。
    阿里图标库iconfont前端使用
    demo_index.html中的说明:按照图中的三步骤即可以使用图标了。
    阿里图标库iconfont前端使用
    这样就可以使用图标了,接下来说下,改图标大小和颜色。

改大小:

  • 全局改所有图标的大小,在 .icon中用font-size属性就可以改所有图标的大小
    阿里图标库iconfont前端使用
  • 单独改某个图标的大小,直接在svg中修改
    <svg class="icon" aria-hidden="true" style="font-size: 20px">
                <use xlink:href="#icon-caijishebeiguanli"></use>
              </svg>&nbsp;振弦传感器
改颜色
  • 第一种在也是在标签中改
            <svg class="icon" aria-hidden="true" style="font-size: 20px;color:#999">
                <use xlink:href="#icon-caijishebeiguanli"></use>
              </svg>&nbsp;振弦传感器

-如果在标签中改没有生效,可以在iconfont.js中通过图标名称找到图标改对应的fill属性即可改颜色,可以改的比较眼花,一般无法生效是因为图标固有颜色,也就是有fill属性,如果没有可以直接在标签中改
阿里图标库iconfont前端使用

相关标签: 图标 前端