在WordPress主题中的标志性图标上使用CSS的问题。

Question

我想在Sequential WordPress主题中使用css自定义Ionicon。标志性图标最初不在主题中。所以我把这段代码放在functions.php。

中

add_action( 'wp_enqueue_scripts', 'bg_enqueue_ionicons' );
  function bg_enqueue_ionicons() {
   wp_enqueue_style( 'ionicons', 
   '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array());
  }

然后将此代码放入footer.php。我想在不使用小部件的情况下将图标直接放入页脚。

 <p class="social-icons">
   <a href="https://www.linkedin.com/in/isaiah/"><i class="ion-social-linkedin-outline"></i></a>
   <a href="http://www.facebook.com/isaiah"><i class="icon ion-social-facebook"></i></a>
   <a href="http://instagram.com/isaiah"><i class="icon ion-social-instagram-outline"></i></a>
   <a href="http://dribbble.com/isaiah"><i class="icon ion-social-dribbble-outline"></i></a>
 </p>

最后添加css，使其看起来不错。 （ 问题 ）

p.social-icons {
    border: 1px solid #949792;
    border-radius: 50%;
    color: red;
    display: inline-block;
    height: 42px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    width: 42px;
}

p.social-icons a:hover {
    border: 1px solid #fff;
    color: red;
}

图标将显示但由于某种原因，CSS将不适用。有没有人解决这个问题？

Answer 1

你的风格应该是这样的。

 <style>
     p.social-icons a{
        border: 1px solid #949792;
        border-radius: 50%;
        color: red;
        display: inline-block;
        height: 42px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        width: 42px;
    }

    p.social-icons a:hover {
        border: 1px solid #fff;
        color: red;
    }
</style>

Answer 2

样式被主题默认样式表中的其他类覆盖。