社交媒体图标SlideIn with Font Awesome

Question

参考：http://www.techandall.com/demos/socialmediaicons/

我正在尝试使用Font Awesome实现社交图标的相同效果，而不是使用图像..但我不知道如何在不添加额外HTML代码的情况下实现此目的，我试图像这样使用它 - 内容：＆＃39; SSSS＆＃39 ;;而不是在背景中的图像..

类似这样的事情

 .social-icons li.twitter a {
   content:'aaa';
   font-size:10px;
   padding-left:5px;
   color:#000;
 }

在上面的代码中，我故意删除＆＃34; font-family作为测试的字体 - 真棒。我可以这样做吗？或者我必须修改HTML并为slideIn和slideOut添加额外的范围？这是小提琴.. http://jsfiddle.net/Zkf7A/

问候

Answer 1

content属性仅适用于：before和：after伪元素。

尝试将您的样式更改为

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

您可能需要从text-indent移除a并替换为overflow: hidden;并将width和height设置为40px在你的演示中，这在很大程度上取决于你想用什么技术来隐藏原始文本。

悬停color

.social-icons li.twitter a:hover:before {
    color: red;
}

Answer 2

是的，你可以在这里得到字体真棒库后的一个例子：

.social-icons li.twitter a {
content: "\f099";
font-family: 'FontAwesome';
font-size:10px;
padding-left:5px;
color:#000;
}