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

Question

我想在 Sequential WordPress 主题中使用 css 自定义 Ionicon。 Iconic Icons 最初不在主题中。所以我把这段代码放在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

样式被主题默认样式表中的不同类覆盖。