html - 社交媒体图标 SlideIn with Font Awesome

Question

引用:http://www.techandall.com/demos/socialmediaicons/

我正在尝试实现与社交图标相同的效果，但使用 Font Awesome，而不是使用图像..但我不确定如何在不添加额外 HTML 代码的情况下实现这一点，我正在尝试像这样使用它 -内容:'sss';而不是背景中的图像..

像这样

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

在上面的代码中，我有意删除了“font-family as font-awesome for testing..我可以这样做吗？或者我将不得不修改 HTML 并为 slideIn 和 slideOut 添加额外的跨度？这是 Fiddle .. http://jsfiddle.net/Zkf7A/

问候

Answer 1

content 属性只适用于 :before 和 :after 伪元素。

试着改变你的风格

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

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

悬停颜色

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