Add custom social icon

A custom icon as in your own that you made, or do you just need to insert a font icon?

Hi Andre,

It depends. I really like the styles in your theme and I’m thinking about creating the similar icon for vk.com.

So, if there is an opportunity to insert a font icon, it will be perfect. If not, maybe I can add this icon manually by creating a custom detection for this social network using style.css or so.

There’s many ways to add icons to a website, including if you are doing image or font based icons. The trend is now font based methods, which then means you will use any of the available options open to you from Genericons, Font Awesome, Icomoon, etc. There are many plugins you can even use that lets you insert icons into content.

This theme uses Genericons for the social icons, but you can check out what else you can use for your needs. (this theme already loads the Genericon font).

As I see this font have no VK icon, so can you please explain how to add it for my site?

I’ve just noticed that Font Awesome has this icon included https://fortawesome.github.io/Font-Awesome/3.2.1/icon/vk/

Is there a simple way to add it to the theme?

To use any other icon font other than the Genericons, you would need to load that font into your site, either by coding it in, or by a plugin. I would recommend the plugin method which offers font awesome.

If you need this icon, you will have to load the Font Awesome font into the theme, which can be done through a child theme or a plugin. You will then need to create a new CSS style for this icon and do it in a way that it works like this theme’s Genericons are coded. The styling for the social icons is found in the theme’s style.css around line 1918. I would recommend you see how it was done there, then you will need to add to it or change the social icons to use the Font Awesome font instead of Genericons. This also means you would need to change each of the social networks icon css to use the content “” icon code from font awesome. For example, the facebook CSS uses this:

.social-navigation a[href*="facebook.com"]:before {
	content: "\f204";
}

So for font awesome, I think it would be this:

.social-navigation a[href*="facebook.com"]:before {
	content: "\f082";
}

How you load the font-awesome font, will be up to you, but check out the plugins first. The other option would be to included the actual font in your theme from the actual Font Awesome website in your theme. Here is some info:

Add Font Awesome

If you do it manually like that, then you should use a child theme method for WordPress.

I wish this could be done easy with a couple mouse clicks, but for the change you want, you have some work to do.

Hi Andre,

D.U.N [done])))

Thanks for your help.
I’ve tried some plugins, but they don’t work as they should. So, here is a decision:

1. Create a child theme (was done earlier)

2. Create child functions.php file with the following code to add Font Awesome icons to WP. (credit – https://sridharkatakam.com/using-font-awesome-wordpress/):

<?php
// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );

}

3. Add a few lines to child style.css file to detect the icon for vk.com using new font:

.social-navigation a[href*="vk.com"]:before {
	content: "\f189";
	font-family: "FontAwesome";
}

As a result, I’ve left Genericons from the parent theme as it is and have added only one icon that I need. It seems to work – https://nimb.ws/RaLuPZ

Hey, nicely done ??

I’m assuming this topic can be set to Resolved?

sure