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

字体图标使用-修改颜色

程序员文章站 2022-05-25 19:05:57
...

今天在画一个页面的时候,用一个要用到图标的地方,产品要求使用字体图标,并联系UI提供了字体图标库给我,字体图标库结构如下:

字体图标使用-修改颜色

使用方法如下:

1、在jsp中引入iconfont.css

    <link rel="stylesheet" type="text/css" href="kyee/his/outp/nurse/font/iconfont.css"> <!-- 字体图标 -->

2、使用<i>标签调用

<i class="icon iconfont icon-add_cases" style="color: #0095F2;font-size: 35px;" onclick="uploadAttachMent()"></i>

刚开始产品说要修改字体图标颜色,就在网上搜了下,说是用fill="red"就可以设置字体图标颜色,最后发现这个属性需要在svg标签中使用,也就是在那个iconfont.svg文件中才可以,但是我现在是要在jsp中修改字体图标颜色啊,所以最后使用了<i>标签这种形式,在style里可以随意修改字体图标的颜色了。

另外,字体图标的大小修改使用:font-size属性哈,width、height这些不管用哈

还有<i>标签调用的时候,class属性决定了调用字体图标库中的哪个图标,比如 icon-add_cases,中划线后面的add_cases就是对应的图标名。这个怎么调是UI提供给我一个demo的,回头我传上来分享给大家哈

相关标签: 字体图标