title: How to blur or to add transparency to fontawesome icon
body: <p>I am using bootstrap and fontawesome. I've got a bullet list like that:</p>
  
  <pre><code>&lt;ul class="fa-ul lead"&gt;
      &lt;li class="m"&gt;&lt;i class="fa-li fa fa-2x fa-check"&gt;&lt;/i&gt;&lt;p&gt;Text.&lt;/p&gt;&lt;/li&gt;
      &lt;li class="m"&gt;&lt;i class="fa-li fa fa-2x fa-check"&gt;&lt;/i&gt;&lt;p&gt;Text.&lt;/p&gt;&lt;/li&gt;
      &lt;li class="m"&gt;&lt;i class="fa-li fa fa-2x fa-check"&gt;&lt;/i&gt;&lt;p&gt;Text.&lt;/p&gt;&lt;/li&gt;
      &lt;li class="m"&gt;&lt;i class="fa-li fa fa-2x fa-check"&gt;&lt;/i&gt;&lt;p&gt;Text.&lt;/p&gt;&lt;/li&gt;  
  &lt;/ul&gt;
  </code></pre>
  
  <p>The icons <code>fa</code> produced a bit too rich and vivid. I want to add a bit transparency or something to make them looking not so much vivid. Is there any way I can do that without any <code>custom css</code>?</p>
  
  <p><strong>UPDATED:</strong>
  By saying <code>custom css</code> I meant that may be there is some bootstrap or fontawesome css classes already exists in order to do that. So I was looking for css solution.</p>