如何为icon图标设置样式
时间: 2024-03-17 09:46:59 浏览: 21
为icon图标设置样式可以通过CSS来实现。首先,给icon图标添加一个class,例如:
```
<i class="icon"></i>
```
然后,在CSS中设置样式:
```
.icon {
font-family: "Font Awesome"; /* 或者其他icon字体的名称 */
font-size: 24px; /* 设置icon的大小 */
color: #333; /* 设置icon的颜色 */
}
```
如果你使用的是SVG格式的icon,则可以直接在HTML中设置样式,例如:
```
<svg class="icon" viewBox="0 0 24 24">
<path fill="#333" d="M12 2.5c-5.514 0-10 4.486-10 10s4.486 10 10 10 10-4.486 10-10-4.486-10-10-10zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8v16zm5.657-10.343l-1.414-1.414-4.243 4.243-1.243-1.243-1.414 1.414 2.5 2.5c.091.091.192.166.298.224.106.058.217.098.341.121.124.023.251.029.377.018.126-.011.251-.043.368-.1.117-.057.223-.139.314-.24l4.5-4.5z"/>
</svg>
```
然后,在CSS中设置样式:
```
.icon {
width: 24px; /* 设置icon的宽度 */
height: 24px; /* 设置icon的高度 */
fill: #333; /* 设置icon的颜色 */
}
```
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)