Replacing Font Awesome Social Media Icons With Images

html css icons blogger social
Wooneh picture Wooneh · Oct 30, 2015 · Viewed 9.7k times · Source

I've attempted to replace fa icons on blogger with custom icons using

.fa-facebook{content:url("")}

The images work on Chrome but not FF or IE. What's going on/Is there a workaround?

Jsfiddle

Google Chrome

Firefox

Answer

Alex picture Alex · Oct 30, 2015

According to W3school:

Definition and Usage

The content property is used with the :before and :after pseudo-elements, to insert generated content.

So instead of .fa-facebook{content:url("")} use .fa-facebook:before{content:url("")}

Jsfiddle

Related questions

Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More
Put search icon near textbox using bootstrap

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox. My code is like this: <div class="container"> <div class="row"> <…

Read More
Unicode via CSS :before

I am using Font Awesome on my webpage and I want to display an icon inside the :before pseudo element. According to the documentation/cheatsheet, I have to type &#xf066; to get this font, but it isn't working. I …

Read More