user1718343 user1718343 - 1 year ago 94
CSS Question

Social Media icons SlideIn with Font Awesome

Reference :

I am trying to achieve the same effect of social icons but with Font Awesome, instead of using images.. but I am not sure how can I achieve this without adding extra HTML code, I am trying to use it like this - content:'ssss'; instead of images as in the background..

something like this

.social-icons li.twitter a {

In the code above I have intentionally removed "font-family as font-awesome for testing.. can I do it like this OR I will have to modify the HTML and add extra span to slideIn and slideOut ? here is the Fiddle..


Answer Source

The content property only works with the :before and :after pseudo-elements.

try changing your styles to

.social-icons li.twitter a:before {
    content 'aaa';
    /* etc... */

you'll probably need to remove text-indent from a and replace with overflow: hidden; and set a width and height to 40px in your demo, this depends largely on what technique you want to use to hide the original text.

hover color

.social-icons li.twitter a:hover:before {
    color: red;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download