Georgia Lou Studios

Welcome to the Help Center!

How do I add new social media icons?

Follow

It's possible to manually add a custom social media icon if the one you'd like isn't available within the default settings. A bit of adjustment to the theme's code will be required.

Georgia Lou Studios uses Font Awesome's icons for social media icons. They offer a huge variety of icons to choose from. You'll first want to find the social icon via Font Awesome that you'd like to add (Hint: A simple CTRL + F find is likely the quickest way). Font Awesome's Icon Directory

In this example, we'll be adding a VK icon. On Font Awesome's icon page, you can see that the code for the VK icon is "vk".

ADD THE ICON TO THE TOP BAR:

Open up the theme file called "header.php".
You can access this theme file via Appearance > Editor > "header.php".
However, if you would like the convenience of line numbers within the theme file, we recommend using the code editor plugin called Advanced Code EditorAdvanced Code Editor.


On the blank Line 53, copy & paste the following code, making sure to replace the dummy text with your VK profile's URL.

Note: If you're adding another icon that is NOT for VK, be sure to replace the "vk" class text with your desired icon code, such as "vimeo-square". Additionally (following the code example below), you'll need to add a " fa fa-" preceding the icon code.

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

 

 

Be sure to save the "header.php" document when you're finished.

ADD THE ICON TO THE ABOUT ME WIDGET:

To manually add an icon to the About Me Widget, you'll need to access a theme file called "about_widget.php". This is located within the theme's "inc" folder and then within the "widgets" folder. You cannot access these folders just from WP Dashboard > Appearance > Editor. You will need to access them via FTP, or, via a code editor plugin such as WPide (recommended).

Open up the document called "about_widget.php".
Between Lines 82-96, you'll see a list of code for various social networks.

The block of code looks like this:

Create a blank line after the last line of code (for the RSS feed) and before the closing "/div" tag.
Here, you can copy & paste the code below.

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

Again, be sure to replace the dummy URL text with your own. And, if you're inserting another icon that is NOT for VK, remember to replace the "vk" in the code with your own icon's ID.
Save the file when you're done making changes.

ADD THE ICON TO THE SOCIAL WIDGET:

To manually add an icon to the Social Widget, you'll need to access a theme file called "social_widget.php". This is located within the theme's "inc" folder and then within the "widgets" folder. You cannot access these folders just from WP Dashboard > Appearance > Editor. You will need to access them via FTP, or, via a code editor plugin such as WPide (recommended).

Open up the document called "social_widget.php".
Between Lines 59-73, you'll see a list of code for various social networks.

The block of code looks like this:

Create a blank line after the last line of code (for the RSS feed) and before the closing "/div" tag.
Here, you can copy & paste the code below.

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

Again, be sure to replace the dummy URL text with your own. And, if you're inserting another icon that is NOT for VK, remember to replace the "vk" in the code with your own icon's ID.
Save the file when you're done making changes.

 

ADD THE ICON TO THE FOOTER:

Open up the document called "footer.php".
Between Lines 19-31, you will see a big block of code for the footer's social media icons.
On the blank Line 32, copy & paste the following code:

<a href="YOUR PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i> <span>VK</span></a>


Again, be sure to replace the dummy text with your profile page's URL.
Additionally, the footer social area has the social network's name in text next to the icon. If you are not inserting a VK icon, remember to not only change the Font Awesome ID to your own, but ALSO to change the text between the two "span" tags in the above code.

Save the theme file when you're finished.

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk