Php wordpress在悬停状态下更改图标颜色

我有一些社交媒体图标，当我把鼠标悬停在上面时，我想改变它们的颜色。但我就是不能让它工作

我的密码是-

global $wp;
$current_url = home_url( add_query_arg( array(), $wp->request ) );

// add action with variabile in url to share
add_action('woocommerce_after_add_to_cart_button','my_social_btn');
function my_social_btn() {
  echo '<div class="my-custom-social">
  <div class = "facebook-icon"> <a href="https://www.facebook.com/sharer/sharer.php?u='.$current_url.'" class="social fb"><i class="fa fa-facebook-f"></i></a> </div>
  <a href="https://twitter.com/intent/tweet?url='.$current_url.'" class="social tw"><i class="fa fa-twitter"></i></a>
 <a href="
https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url='.$current_url.'" class="social tw"><i class="fa fa-pinterest"></i></a>
 </div>
';
}

---

您的css应该如下所示

.facebook-icon:hover a i {

   color: blue!important;
}

---

这取决于您的图标是否在svg中。然后您可以使用例如

fill:blue

。如果它是正常的图像，那么你需要准备另一个图像并交换它们，或者你可以使用

过滤器：

，它有两个功能，可以帮助你生成蓝色…这是一个图标，我认为fa fa facebook将声明更改为背景色：蓝色！重要信息，看看这是否有效。不，这会使背景变为蓝色，但不会将“f”改为蓝色-url太糟糕了。我真的不用，所以这就是为什么。但是我应该！您提供的网站上的图标正在更改为蓝色。我看到了另一件事。您的css类与html中的不同。。。在你的html中显示它的

fa-fa-facebook-f

，你会显示

。facebook图标

你知道我点击它的原因吗。。它没有在facebook上正确共享页面？它只是打开一个带有共享按钮的页面。。什么都没用？哦，我现在真的不知道有什么问题这么难说。好的，没问题。谢谢

.facebook-icon:hover a i {

   color: blue!important;
}