Customize Social Icons

Resolved mitaedomato
(@mitaedomato)

11 years ago

Hello,

I have some social pages which I’ve created customized social icons to show up on the Social Menu.
I managed to edit the style.css to read my URL and show something alongside the Facebook and Youtube icons, but since I can’t change the font-family files, my personal icons doesn’t appear.
I tried creating my own set of icons with IcoMoon, but I didn’t manage to adapt all the code to make it work (or I did it wrong).

There is a way to insert customized icons on the Social Menu?

Viewing 3 replies - 1 through 3 (of 3 total)

vladff
(@vladff)

11 years ago

Hi,

Only way I can think of at the moment is – if your icons are images – to set them as background images.

But I’m guessing the easiest way would be to make a child theme, edit header.php from it and simply hardcode your links there along with your icons.
Thread Starter mitaedomato
(@mitaedomato)

11 years ago
Thanks for the answer.

I’ve managed to find a way to solve the problem.
I made a few alterations in the header.php: on the social menu nav tag, I copied and pasted the main navigation menu code, so the CSS definitions still applies and my custom icons also work.

Just in case someone else also want to personalize icons:

– In header.php do the following:
Before:
```
<?php if ( has_nav_menu( 'social' ) ) : ?>
	<nav class="social-navigation clearfix">
		<?php wp_nav_menu( array( 'theme_location' => 'social',
		'link_before' => '<span class="screen-reader-text">',
		'link_after' => '</span>', 'menu_class' => 'menu clearfix',
		'fallback_cb' => false ) ); ?>
	</nav>
<?php endif; ?>
```
After
```
<nav id="social-navigation" class="social-navigation" role="navigation">
	<?php wp_nav_menu( array( 'theme_location' => 'social' ) ); ?>
</nav>
```
I’m using the Nav Menu Images plugin for the icons on navigation menu.

PS: Amazing theme.
Thread Starter mitaedomato
(@mitaedomato)

11 years ago
Just adding,

The custom icons doesn’t align right with the original icons from the theme, so I uploaded a image for Facebook and Youtube as well.

Doing this, the Social link duplicates the icons (one for the upload and another for the theme). To hide te icons do the following:

– In style.css edit the content of the url reference:

Before
```
.social-widget a[href*="facebook.com"]::before,
.social-navigation li a[href*="facebook.com"]::before {
	content: '\f082';
}
```
After
```
.social-widget a[href*="facebook.com"]::before,
.social-navigation li a[href*="facebook.com"]::before {
	content: '';
}
```

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Customize Social Icons’ is closed to new replies.

Tags