How to blur or add transparency to the font icon

Question

I use bootstrap and fontawesome. I have a bullet list:

<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>

The icons facreated a bit too rich and bright. I want to add some transparency or do something so that they do not look so bright. Is there any way to do this without any custom css?

UPDATED: Speaking custom css, I meant that maybe some bootstrap classes or fontawesome css exist for this. So I was looking for a css solution.

Answer 1

As stated on the Font Awesome homepage:

Font Awesome , : , , , CSS.

CSS, CSS, CSS , CSS, :

CSS

- , . , , .

.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, , , , , , ". Font Awesome CSS img:

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

Answer 2

.fa{
    opacity:0.5;
}

, , fa "", , , , , ,

.fa{
    color:#878787;
}

,

.m .fa{
    opacity:0.5;
}

sass/less

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

Answer 3

, , . , , #ddd, CSS

ul.lead .fa{
    color: #ddd
}