Css 我正在尝试在悬停时填充旗帜图标的颜色

我试过这个。但它不会在悬停时被填满

.flag图标
{
填充物：白色；
}
.flag图标：悬停
{
填充物：红色；
}

轮廓标志

使用

颜色

而不是

填充

请参见下面的代码片段：

.flag图标{
颜色：蓝色；
}
.flag图标：悬停{
颜色：红色
}

轮廓标志

它将更改轮廓标志的颜色。我想将轮廓标志更改为填充标志我添加了一个新代码，用于将轮廓标志更改为填充标志

.flag-icon::before {
        font-size: 18px;
        margin-top: 5px;
        font-family: "Material Icons";
        transition: 0.1s ease;
        content: 'outlined_flag';
    }
    
    .flag-icon:hover::before {
        content: "flag";
        color: red;
    }