Fontello font icons not rendered properly on Android

Are font icons supported in Android stack browser? I’m using fontello font icons and there’s always one icon that’s not rendered. If I replace the defective icon with another variant, another icon is affected and in turn does not render. It seems to happen randomly.

Here’s my markup:

Read More
<div class="header-links clear">
    <ul class="sm-links">
        <li><a class="facebook" href="<?php echo $theme_options['facebook'] ?>"><i class="icon-facebook-circled"></i></a></li>
        <li><a class="twitter" href="<?php echo $theme_options['twitter'] ?>"><i class="icon-twitter-circled"></i></a></li>
        <li><a class="gplus" href="<?php echo $theme_options['gplus'] ?>"><i class="icon-gplus-circled-1"></i></a></li>
        <li><a class="linkedin" href="<?php echo $theme_options['linkedin'] ?>"><i class="icon-linkedin-circled"></i></a></li>
    </ul>
</div>

Here’s how I’m loading the font icon styles:

function sms_styles_scripts() {
    // fontello 
    wp_enqueue_style( 'fontello-1', get_stylesheet_directory_uri() . '/fonts/fontello/css/fontello.css', array(), '', 'all' );
    // fontello
    wp_enqueue_style( 'fontello-2', get_stylesheet_directory_uri() . '/fonts/fontello/css/animation.css', array(), '', 'all' );
    // fontello
    wp_enqueue_style( 'fontello-3', get_stylesheet_directory_uri() . '/fonts/fontello/css/fontello-codes.css', array(), '', 'all' );
    // fontello
    wp_enqueue_style( 'fontello-4', get_stylesheet_directory_uri() . '/fonts/fontello/css/fontello-embedded.css', array(), '', 'all' );
}
add_action( 'wp_enqueue_scripts', 'sms_styles_scripts' );

Any thoughts? For this matter, is font-icons supported in all major mobile browsers?

Related posts

Leave a Reply

1 comment

  1. Some things I would try (if you haven’t already)

    • Applying the class to the <a> tags instead of on nested <i> tags
    • Add an empty <li> at the end of your list – see if all 4 icons appear then (?)
    • Try fresh fontello archive using all diff fonts