user1718343 user1718343 - 4 months ago 16
CSS Question

Social Media icons SlideIn with Font Awesome

Reference : http://www.techandall.com/demos/socialmediaicons/

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 {
content:'aaa';
font-size:10px;
padding-left:5px;
color:#000;
}


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.. http://jsfiddle.net/Zkf7A/

regards

Answer

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