Question

我是这个的相对新手，但是我试图在此页面的页脚设置Font Awesome社交图标的样式，以便它们都链接到社交媒体页面并使用悬停效果（例如，悬停效果Twitter图标（尚未链接），但我不知道如何使它起作用：http://wcbvi-one.amandawegner.com/

/* SOCIAL ICONS IN FOOTER*/
#widget-social-icons li {
    display: inline;
    color: whitesmoke;
    margin-left: 5px;
}

#widget-social-icons {
    text-align: center;
}

#widget-social-icons li hover {
    color: #8dc126;
}

#footer-widgets .footer-widget li:before {
    content:none;
}

Answer 1

尝试此代码：

/* SOCIAL ICONS IN FOOTER*/

#widget-social-icons li {
    display: inline;
    color: whitesmoke;
    margin-left: 5px;
}

#widget-social-icons {
    text-align: center;
}

#widget-social-icons li:hover {
    color: #8dc126;
}

#footer-widgets .footer-widget li:before {
    content:"";
}

Answer 2

用于超链接   将锚标记添加到twitter列表元素。

<li><a href="#"><i class="fab fa-twitter fa-3x"></i></a></li>

您可以在其中将您的Twitter句柄的链接放在 href 属性中。

要获得悬停效果，请执行以下操作：

从以下项更改以下CSS：

#widget-social-icons li hover {
    color: #8dc126;
}

收件人

 #footer-widgets .footer-widget li a:hover {
        color: #8dc126;
    }

字体超赞图标+链接+悬停颜色

2 个答案: