CODEWITHSUNDEEP
htmlcssfont-awesome
Sergino
Sergino

Reputation: 10838

How to blur or to add transparency to fontawesome icon

I am using bootstrap and fontawesome. I've got a bullet list like that:

<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 fa 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 custom css?

UPDATED: By saying custom css 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.

Upvotes: 7

Views: 28274

Answers (3)

James Donnelly
James Donnelly

Reputation: 128776

As stated on Font Awesome's homepage:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

There's absolutely no reason not to use CSS, so ignoring your requirement of not using CSS I'm going to give you a CSS solution anyway and suggest you use this instead of the non-CSS solution I've also provided:

CSS Solution

Font Awesome icons are characters contained within a font. This makes them regular text, allowing you to style the characters as you would regular text.

.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);
}

A better solution might just be to change the colour of your icons to something less prominent:

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

Non-CSS Solution

If you really want a non-CSS solution, like you've stated in the question, one thing you could do is save the relevant icon as an image and play around with it in any picture editing software to apply the effect you're looking for. Then, instead of adding the icon in using the provided Font Awesome CSS, you could upload the image to your server and include it as an img element:

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

Upvotes: 15

su8898
su8898

Reputation: 1713

Pick a dark shade that's fitting your UI from here and use it like below. If for example you selected the color #ddd, add the below style to your CSS

ul.lead .fa{
    color: #ddd
}

Upvotes: 0

atmd
atmd

Reputation: 7490

how about

.fa{
    opacity:0.5;
}

Thats assuming you want all fa icons a little 'see through' you could of course always change the colour too, so maybe use grey instead of black

.fa{
    color:#878787;
}

If you only want to style this lists fa's try

.m .fa{
    opacity:0.5;
}

or if you are using sass/less

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

Upvotes: 6

Related Questions