Html 如何模糊或向图标添加透明度

我使用的是bootstrap和fontsome。我有一张这样的清单：

<ul class="fa-ul lead">
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>  
</ul>

文本

文本

文本

文本。

图标

fa

的内容过于丰富和生动。我想增加一点透明度，或者让它们看起来不那么生动。没有任何

自定义css

，有什么方法可以做到这一点吗

更新： 我说的

customcss

是指可能已经存在一些引导类或css类来实现这一点。所以我在寻找css解决方案。

怎么样

.fa{
    opacity:0.5;
}

这是假设你希望所有fa图标都有一点“透明”，当然你也可以随时改变颜色，所以也许可以使用灰色而不是黑色

.fa{
    color:#878787;
}

如果你只想设计这个样式，那就试试吧

.m .fa{
    opacity:0.5;
}

或者如果您正在使用sass/less

.m{
    .fa{
        opacity:0.5;
    }
}

---

如Font Asome主页所述：

Font Awesome为您提供了可缩放的矢量图标，可以立即进行自定义-大小、颜色、阴影，以及任何可以使用CSS功能完成的操作

绝对没有理由不使用CSS，因此忽略您不使用CSS的要求，我将为您提供一个CSS解决方案，并建议您使用此解决方案，而不是我提供的非CSS解决方案：

CSS解决方案 字体图标是包含在字体中的字符。这使它们成为常规文本，允许您按照常规文本的方式设置字符的样式

.fa-li.fa.fa-2x.fa-check{
不透明度：0.75；/*不透明度（透明度）*/
颜色：rgba（0,0,0,0.75）；/*rgba颜色（可选透明度）*/
-webkit过滤器：模糊（2px）；/*模糊*/
-moz滤波器：模糊（2px）；
过滤器：模糊（2px）；
}

更好的解决方案可能只是将图标的颜色更改为不太显眼的颜色：

.fa-li.fa.fa-2x.fa-check{
颜色：#444；
}

非CSS解决方案 如果你真的想要一个非CSS的解决方案，就像你在问题中所说的，你可以做的一件事是将相关图标保存为图像，并在任何图片编辑软件中使用它来应用你想要的效果。然后，您可以将图像上载到服务器，并将其作为

img

元素，而不是使用提供的字体Awesome CSS添加图标：

<img src="path/to/my-modified-fa-icon.png" alt="fa-check" />

---

从中选择一个适合您的UI的深色阴影，并像下面那样使用它。 例如，如果您选择了颜色#ddd，请将以下样式添加到CSS中

ul.lead .fa{
    color: #ddd
}

---

为什么没有自定义css？使用不透明度或rgba颜色可能是最好的选择。我删除了

twitter bootstrap

标签，因为这个问题与此无关。这就是css存在的原因。为什么不想使用控制元素在页面上的显示/样式的确切方式？

text secondary