字体图标使用-修改颜色

今天在画一个页面的时候，用一个要用到图标的地方，产品要求使用字体图标，并联系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;" οnclick="uploadAttachMent()"></i>

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

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

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

字体图标使用-修改颜色相关推荐

百度地图自定义覆盖物自定义字体图标动态修改图标颜色
实现效果: 图标用的是字体图标,为了方便动态改变颜色关键代码 function ComplexCustomOverlay(params) {let defaultParams = {point: { ...
【解决】阿里巴巴icon图标无法修改颜色
解决方式很简单,把彩色图标的勾去掉就可以了,如下只要这个彩色图标不选就要可以,如果一定要选建议css文件分开存放就可以实现既有彩色又有可以修改颜色的字体图标的效果.
字体图标svg改变颜色
svg默认带有颜色(fill属性),要想修改颜色,需先去除颜色去除颜色后,fill:white:来修改颜色注意去色后,链接会更新,记得更改
iconfont图标不能修改颜色解决方案
在做项目的时候我发现下载的icon有的可以修改颜色而有的不能这是因为那些本来就有颜色的icon或者自己选择了颜色的icon下载用到项目里之后就无法改变颜色了.有颜色的icon会在svg的path中增 ...
【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
字体图标(font-icon)，你还有什么理由不使用它？
优点下面的简介来自,著名字体图标库Font Awesome的首页,http://fontawesome.io: Font Awesome gives you scalable vector icon ...
bootstrap4.0图标使用_详解Bootstrap glyphicons字体图标
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 首先给大家介绍什么是字体图标: ...
nvue(weex)中使用字体图标
1.在nvue页面的created生命周期中做如下设置 created() { let domModule = weex.requireModule('dom'); ...
U盘加背景图片，改图标，修改字体颜色,把文件夹变彩色，更改文件夹背景
U盘加背景图片,改图标,修改字体颜色,把文件夹变彩色,更改文件夹背景改图标: 1.首先选择一个你喜欢的图标,图标的扩展名是:ico. 2.将这个图标文件拷到U盘,并在U盘中新建一个文本文档. 3.在 ...

字体图标使用-修改颜色

字体图标使用-修改颜色相关推荐

最新文章

热门文章