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>

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?

Read more here: Issue with using CSS on Iconic Icons in WordPress Theme.


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: