字体图标使用-修改颜色
程序员文章站
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的,回头我传上来分享给大家哈
上一篇: 图片预览【解决微信浏览器缓存导致图片无法预览的问题】
下一篇: 主要浏览器的上传图片预览