如何模糊或为fontawesome图标添加透明度

Question

我正在使用bootstrap和fontawesome.我有一个这样的子弹列表:

<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有点过于丰富和生动.我想添加一点透明度或某些东西,使它们看起来不那么生动.没有任何方法我有什么方法可以做到的custom css吗？

更新: 通过说custom css我的意思是可能有一些bootstrap或fontawesome css类已经存在,以便这样做.所以我一直在寻找css解决方案.

Answer 1

正如Font Awesome的主页所述:

Font Awesome为您提供可立即定制的可缩放矢量图标 - 大小,颜色,阴影以及可以通过CSS的强大功能完成的任何事情.

绝对没有理由不使用CSS,所以无视你不使用CSS的要求我会给你一个CSS解决方案,并建议你使用它而不是我提供的非CSS解决方案:

CSS解决方案

Font Awesome图标是字体中包含的字符.这使它们成为常规文本,允许您像常规文本一样设置字符样式.

.fa-li.fa.fa-2x.fa-check {
    opacity: 0.75;                /* Opacity (Transparency) */
    color: rgba(0, 0, 0, 0.75);   /* RGBA Color (Alternative Transparency) */
    -webkit-filter: blur(2px);    /* Blur */
    -moz-filter: blur(2px);
    filter: blur(2px);
}

更好的解决方案可能只是将图标的颜色更改为不太突出的颜色:

.fa-li.fa.fa-2x.fa-check {
    color: #444;
}

非CSS解决方案

如果您真的想要一个非CSS解决方案,就像您在问题中所述,您可以做的一件事是将相关图标保存为图像,并在任何图片编辑软件中使用它来应用您正在寻找的效果对于.然后,您可以将图像上传到服务器并将其作为img元素包含在内,而不是使用提供的Font Awesome CSS添加图标:

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

Answer 2

怎么样

.fa{
    opacity:0.5;
}

也就是说，假设您希望所有fa图标都有些“透视”，那么您当然也可以随时更改颜色，因此可以使用灰色而不是黑色

.fa{
    color:#878787;
}

如果您只想样式，请列出fa的尝试

.m .fa{
    opacity:0.5;
}

或者如果您使用的是无礼/少

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