Using Social Icons -socicon- Font

More or less a week ago, we was talking about the font genericon, principally for constructing wonderful social menus. Genericons is a good font but if you need really add a lot of social profiles, it’s probably that you don’t find the most unknown or inhabitual profiles. If this is your case, your icons font is Socicon Font.

Using Social Icons -socicon- Font

SocIcon font is a very good font that includes more that one hundred of social profiles icons: the most known that you probably can find in any other icons font but also the most unknown, rare… So, it’s actually a good options if your website has a strong social character.

Using Socicon

On the other hand, Socicon Font is very simple to use because it has a very good css set rules that allow you to use it whether as a <span> HTML tags, or as via data attributes inside any HTML tag element. See these next examples for flickr social profile.

<span class="socicon socicon-flickr"></span>  <!-- first option -->
<span data-icon="\e055;"></span>              <!-- second option -->

And of course, if you write a simply set of your own css rules, you can even associate directly each social icon with any special url. Continuing with flickr:

// In you own set of CSS rules
// First the common part for all profiles
.social-profile {
  font-family: "socicon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// After, the association between each one of profiles and its URL
a[href*="flickr.com"]:before { content: "\e055"; display:inline-block; }

// Then inside any template of your theme, you need just add the anchor element with the correct 
// class, and the icon will appear.
<a class="social-profile" href="http://flickr.com/your-address-here"></a>

Installation

Its installation is also very easy, just as with any other .css file of your WordPress theme, ie, using WP function wp_enqueue_style().

Only as documentary, if we suppose that the folder where you upload the socicon files is named social-fonts, the code for using socicon is like this.

function social_icons_font () {
    wp_register_style ( 'social-icons', get_stylesheet_directory_uri() . "/social-fonts/syles.css", '', '', 'all' )
    wp_enqueue_style  ( 'social-icons' );
}
add_action ( 'wp_enqueue_scripts', 'social_icons_font' );

Also remember that you have also got available a cloud version of Socicon in whose case, you do not even have to upload the source files into your theme but that you can directly call to the cloud file.

function social_icons_font () {

    wp_register_style ( 'social-icons', 'https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css', '', '', 'all' )
    wp_enqueue_style  ( 'social-icons' );

}
add_action ( 'wp_enqueue_scripts', 'social_icons_font' );

Finally, remember that you have also available a plugin for WordPress.

Try using Socicon in your themes, I’m sure that you like it.

Have a nice WordPressing!

Leave a Comment

   Mandatory field
You can use these HTML tags inside the commment.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>