css怎么设置图标的颜色
时间: 2023-08-01 16:07:55 浏览: 58
可以使用CSS的color属性来设置图标的颜色。但是,对于一些使用了SVG格式的图标,可以使用fill属性来设置填充颜色。例如,对于使用了fontawesome的图标,可以使用以下CSS来设置颜色:
```
.icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 24px;
color: red;
}
```
对于使用了SVG格式的图标,可以使用以下CSS来设置填充颜色:
```
.icon {
fill: red;
}
```
相关问题
css字体图标改变颜色
要改变CSS字体图标的颜色,你可以使用以下几种方法:
1. 使用fill属性:在网上所提到的方法中,使用fill属性可以直接设置字体图标的颜色。这个属性需要在SVG标签中使用,也就是在iconfont.svg文件中。但是,如果你想在JSP中修改字体图标的颜色,你可以使用<i>标签并在style中随意修改字体图标的颜色。
2. 引入iconfont.css文件:在JSP文件中,你可以通过在<head>标签中的<link>标签中引入iconfont.css文件来使用字体图标。这个文件中包含了字体图标的样式定义,你可以根据需要修改其中的颜色属性。
3. 使用内联样式:你还可以直接在HTML元素的style属性中设置字体图标的颜色。例如,在示例代码中,可以在<svg>标签的class属性中定义一个名为"icon"的样式,然后在<style>标签中修改该样式的fill属性来改变字体图标的颜色。
这些方法都可以让你修改CSS字体图标的颜色,你可以根据具体需求选择其中的一种方法来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [字体图标使用-修改颜色](https://blog.csdn.net/pengShuai007/article/details/80649315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [CSS字体图标](https://blog.csdn.net/sinat_28317385/article/details/119969239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
CSS动态修改SVG图标颜色
可以使用CSS的`fill`属性来修改SVG图标的颜色。具体步骤如下:
1. 在HTML中将SVG图标插入到页面中:
```html
<svg class="icon" viewBox="0 0 512 512">
<path d="M256 0C114.844 0 0 114.844 0 256s114.844 256 256 256 256-114.844 256-256S397.156 0 256 0zm0 480c-119.297 0-224-94.703-224-224S136.703 32 256 32s224 94.703 224 224-94.703 224-224 224z"></path>
</svg>
```
2. 添加CSS样式,使用`fill`属性修改图标颜色:
```css
.icon {
fill: #000; /* 默认黑色 */
}
.icon:hover {
fill: #ff0000; /* 鼠标悬停时红色 */
}
```
注意:有些SVG图标可能没有填充(fill)属性,只有描边(stroke)属性,此时可以使用`stroke`属性来修改描边颜色。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)