How to set a custom social icon?

Sometimes the theme is missing just the social icon you need. Did you know you can add your own one?

In case you would like to set up a custom social icon that is not included with your theme use a custom CSS coding:

  1. First you will need to import your custom icon(s) as a content icon font. You will find the instructions for the procedure in your theme’s documentation.
    (If your theme does not support custom icon font, you will need to use the image icon procedure below.)
  2. Then add this CSS code into your website (please edit the code to your needs):
    /* Using icon font: */
    .social-links .my-social-icon a::before {
        font-family: 'fontello';
        /* Icon glyph code. Change it to your needs. */
        content: '\e999';
    }
    .social-links .my-social-icon svg {
        /* If the theme uses SVG icons, we need to hide the default one. */
        display: none;
    }
    /* Alternative way of using an icon image: */
    .social-links .my-social-icon a::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url('URL_TO_YOUR_ICON_IMAGE_HERE');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;
    }

    The 'fontello' in the code above tells browser to use an icon from your custom content icons set (which is a font, basically).

    Then you need to set the correct icon glyph code so the correct icon is displayed. You can obtain the glyph code from Fontello when you were setting your custom icons set or simply click the “To display the icon font, please, use this CSS file:” link provided at Appearance → Icon Font page (your theme has to support custom icon font upload) and search for the desired icon there.

  3. Finally, you need to set up your custom CSS class you’ve used above (the my-social-icon class) for the social menu item:

    Setting up a custom icon menu item class

That’s it. You custom social icon should now display in a social menu on your website.