MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I add a social media icon to Cassia that is not included in the theme?

Please note: This FAQ Article is specifically for the Cassia theme.


To add in an icon to your Cassia sidebar's Social Media widget for a social network that is not included in the theme, you can manually insert one into the theme's code.
In this tutorial, we'll use Bloglovin' as an example.



FINDING THE ICON YOU'D LIKE TO USE

Cassia's social icons are pulled from the Font Awesome icon directory. They have loads of icons for various social networks, brands, etc. First, you'll want to visit the Font Awesome icon directory and find the icon you'd like to use.

Font Awesome's Icon Directory

Each icon has a Font Awesome ID code assigned to it.
They have yet to create an icon specifically for Bloglovin', so we'll go ahead and use their solid "heart" icon option instead. The text next to the icon is "heart". We'll note this down.


Cassia SM Icon Screenshot #1



ADDING THE SOCIAL ICON TO THE THEME

Now that we have our icon chosen, we'll manually add the necessary code to our theme's "social_widget.php" file. Because the Social Widget theme file is within a sub-folder and not the main theme file directory, we'll either need to access it via FTP, or, via a code editor plugin such as WPide (recommended).
Once installed & activated, WPide allows you to access and edit all of your theme files from your WP dashboard.

Locate the Cassia theme file called "social_widget.php" (within the "inc" folder and then within the "widgets" folder). Between Line 68 and Line 69, copy & paste the following code:

<a target="_blank" href="YOUR-URL-HERE"><i class="fa fa-heart round-icon"></i></a>


Cassia SM Icon Screenshot #2


Note: You'll want to replace the YOUR-URL-HERE text with the site URL you'd like to link users to.

If you're not using the heart icon, remember to replace the "heart" text with whatever Font Awesome icon ID code you'd like. Leave the other code elements the same.

For example, if you're adding a "Vine" icon, you'd ensure your code looked like:

<a target="_blank" href="YOUR-VINE-URL-HERE"><i class="fa fa-vine round-icon"></i></a>


Be sure to save the theme file when you're done. Refresh your site, and the new icon should be displaying!