Issue with using CSS on Iconic Icons in WordPress Theme.

Question

I would like to customize Ionicon using the css in Sequential WordPress theme. Iconic Icons was not originally in the theme. So I added by putting this code in 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());
  }

Then placing this code into footer.php. I would like to place the icon directly into footer without using widgets.

 <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>

Finally adding the css, to make it look good. (Issue Here)

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;
}

The icons will show but for some reason, the CSS will not apply. Does anybody have a fix for this?

Use the child of the parent: p.social-icons a { ... – Christina May 24 '17 at 02:25 — Christina, May 24 '17 at 02:25

Vel · Answer 1 · 2017-05-24T08:42:08.420

0

your style should be like this.

 <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>

edited May 24 '17 at 08:42

answered May 24 '17 at 07:31

Vel

9,027
6
34
66

The code is already in a style sheet. This doesn't change anything. – Isaiah May 24 '17 at 08:40
I found the problem, my styles were being overwritten by code already in the theme. Thank you for checking it out. – Isaiah May 24 '17 at 08:50

score 0 · Answer 2 · answered May 24 '17 at 08:51

0

Styles were being overwritten by a different class in the theme default style sheet.

answered May 24 '17 at 08:51

Isaiah

37
9

Issue with using CSS on Iconic Icons in WordPress Theme.

2 Answers2