Vacation notice: Hello! Please note that due to vacation the service will experience delays since Wednesday 19th July 2017 until Wednesday 2nd August 2017. Thank you for understanding, and sorry for inconvenience!

Okay
  Print

How to set a custom social icon?

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 social menu icon class

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