Social Icons


How to add social icons

I’ve used FontAwesome for the social icons; you can see all available icons here. There are pro/premium icons, too, so make sure the icons you pick are free, otherwise they wont show up.

You can use the code below and add it to a Custom HTML widget in a widget area (Appearance > Widgets) and replace LINK with the link to your social profile (check this article if your links are not working):

<div class="social-icons is-size-normal is-style-plain is-shape-none">
<a href="LINK" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="LINK" target="_blank"><i class="fab fa-pinterest"></i></a>
<a href="LINK" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="LINK" target="_blank"><i class="fab fa-tiktok"></i></a>
<a class="search-toggle"><i class="fas fa-search"></i></a>
</div>

How to add a new icon?

  1. Go to FontAwesome > find & select the icon you want to use
  2. Hover over the HTML and click on it (you’ll see “Copy Code Snippet”) to copy it
  3. Use the HTML below and replace the part in bold with the icon you’ve copied from FontAwesome:
<a href="LINK" target="_blank"><i class="fa-brands fa-instagram"></i></a>

Social icons size

You have 5 sizes to pick from – small, normal, medium, large and larger.

In the code above, you can see the class is-size-normal – this is what you have to edit to change the size of your social icons. Replace normal with small, medium, large or larger.


Social icons styles

You have the option of choosing between 3 styles (plain, border and background) and 3 shapes (square, rounded and circle).

In the code above, you can see the classes is-style-plain and is-shape-none – this is what you have to edit to change the style and shape of your social icons.

Classes for style

is-style-plain
is-style-border
is-style-background

Classes for shape

is-shape-none
is-shape-rounded
is-shape-circle

How it looks

Note: is-shape-none is not pictured, but if that’s what you select, then the shape of the border/background of the icons will be square. Below are just examples; you can have the icons rounded with a background or circle with a border.


Change the colors of the social icons

Go to your WordPress dashboard > Appearance > Colors & Fonts > Colors > Social Icons.

You have the option of changing the colors for the social icons in the menu, container (sidebar, footer + other widget areas in the container) and the site footer.


Add social icons in the menu

  1. Go to your WordPress dashboard > Appearance > Widgets
  2. Expand the Social Icons widget area
  3. Click on “+” to add a block and select Custom HTML
  4. Add the code for the social icons there

Add social icons in the sidebar, footer or other widget area

  1. Go to your WordPress dashboard > Appearance > Widgets
  2. Expand the Sidebar or Footer (or other) widget area
  3. Click on “+” to add a block and select Custom HTML
  4. Add the code for the social icons there

Add social icons in the site footer

  1. Go to your WordPress dashboard > Appearance > Widgets
  2. Expand the Site Footer widget area
  3. Click on “+” to add a block and select Custom HTML
  4. Add the code for the social icons there