阿里图标库iconfont前端使用
程序员文章站
2024-02-14 09:54:28
...
前端难免需要用到各种各样的图标,感觉阿里图标库里面的图标比较齐全,故写篇博客做个笔记。
-
阿里图标库三种应用说明,这里面分别有:icon单个使用,unicode引用,symbol引用 这三种使用方式,其中symbol引用这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法,并且这种使用方式方便改图标的大小和颜色,这里面就详细介绍symbol引用这种使用方式。
symbol引用
- 将自己需要的图标库添加到购物车中,选好所有自己需要的图标,可以自行搜索,尽量一次选齐全。
-
-点击上图右上角红色1的购物车,将购物车中的所有图标添加到自己的项目中,如果没有项目需要新建,也可以根据项目分类,具体自己把握。
- 然后就可以进入到自己项目中查看刚才添加的图标,然后点击到下载到本地。
- 下载到本地后解压打开,可以看到这样的一个文件列表,我们需要的是 iconfont.css和iconfont.js,其中的demo_index.html也有三种应用方式的说明。
demo_index.html中的说明:按照图中的三步骤即可以使用图标了。
这样就可以使用图标了,接下来说下,改图标大小和颜色。
改大小:
- 全局改所有图标的大小,在 .icon中用font-size属性就可以改所有图标的大小
- 单独改某个图标的大小,直接在svg中修改
<svg class="icon" aria-hidden="true" style="font-size: 20px">
<use xlink:href="#icon-caijishebeiguanli"></use>
</svg> 振弦传感器
改颜色
- 第一种在也是在标签中改
<svg class="icon" aria-hidden="true" style="font-size: 20px;color:#999">
<use xlink:href="#icon-caijishebeiguanli"></use>
</svg> 振弦传感器
-如果在标签中改没有生效,可以在iconfont.js中通过图标名称找到图标改对应的fill属性即可改颜色,可以改的比较眼花,一般无法生效是因为图标固有颜色,也就是有fill属性,如果没有可以直接在标签中改
上一篇: Kettle入门篇
下一篇: kettle插件二次开发