Add Font Awesome Icon to Social Media Header

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 20 replies, 4 voices, and was last updated 10 years by Mohammad – SUPPORT.

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

Back to forum

Posted in: Dante
February 28, 2014 at 1:46 am #52718

Kimley
Member

Post count: 15

I’d like to add the font awesome phone icon to the right of the social media icons in the header and have it link to the contact page.

This is what I’ve got so far on my dev site:
http://jspigner.pairserver.com

I’d like the phone to be the same size as the social media icons, have a similar hover effect and be placed to the right of the social media icons.

Please let me know if this is possible without customizations.

Thanks so much!

February 28, 2014 at 6:48 am #52736
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please open to edit shortcodes.php at /dante/swift-framework/
```
Find this code at line 758 - 760 
if ($id == "xing") {
$social_icons .= '<li class="xing"><a href="'.$xing.'" target="_blank"></a></li>'."\n";
}

and put this code after these lines 

$social_icons .= '<li class="phone"><a href="http://jspigner.pairserver.com/contact-us/" target="_blank"></a></li>'."\n";
```
It will make your desire change .

Thanks
With Best Regards
Swift Ideas
February 28, 2014 at 6:50 pm #53051

Kimley
Member

Post count: 15

Thanks so much for the super quick reply!

This almost worked however it added two phone icons to the right of each of my social media icons. But you sent me in the right direction and I was able to configure it exactly how I wanted it.

Since I’ve now made changes to the shortcodes file, will these be lost if I update the theme? Will using a child theme save these if I update?

Thanks so much for your help!!!

Kimley

March 1, 2014 at 2:00 am #53083

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
You most welcome .I amglad that issue fixed . Please activate your child theme and put this code functions.php at /wp-content/themes/dante-child/ . So you can keep this after update .
/* SOCIAL SHORTCODE
================================================= */
if (!function_exists(‘sf_social_icons’)) {
function sf_social_icons($atts, $content = null) {
extract(shortcode_atts(array(
“type” => ”,
“size” => ‘standard’,
“style” => ”
), $atts));

$options = get_option(‘sf_dante_options’);

$twitter = $options[‘twitter_username’];
$facebook = $options[‘facebook_page_url’];
$dribbble = $options[‘dribbble_username’];
$vimeo = $options[‘vimeo_username’];
$tumblr = $options[‘tumblr_username’];
$skype = $options[‘skype_username’];
$linkedin = $options[‘linkedin_page_url’];
$googleplus = $options[‘googleplus_page_url’];
$flickr = $options[‘flickr_page_url’];
$youtube = $options[‘youtube_url’];
$pinterest = $options[‘pinterest_username’];
$foursquare = $options[‘foursquare_url’];
$instagram = $options[‘instagram_username’];
$github = $options[‘github_url’];
$xing = $options[‘xing_url’];

$social_icons = ”;

if ($type == ”) {
if ($twitter) {
$social_icons .= ‘<li class=”twitter”>‘.”\n”;
}
if ($facebook) {
$social_icons .= ‘<li class=”facebook”>‘.”\n”;
}
if ($dribbble) {
$social_icons .= ‘<li class=”dribbble”>‘.”\n”;
}
if ($youtube) {
$social_icons .= ‘<li class=”youtube”>‘.”\n”;
}
if ($vimeo) {
$social_icons .= ‘<li class=”vimeo”>‘.”\n”;
}
if ($tumblr) {
$social_icons .= ‘<li class=”tumblr”>‘.”\n”;
}
if ($skype) {
$social_icons .= ‘<li class=”skype”>‘.”\n”;
}
if ($linkedin) {
$social_icons .= ‘<li class=”linkedin”>‘.”\n”;
}
if ($googleplus) {
$social_icons .= ‘<li class=”googleplus”>‘.”\n”;
}
if ($flickr) {
$social_icons .= ‘<li class=”flickr”>‘.”\n”;
}
if ($pinterest) {
$social_icons .= ‘<li class=”pinterest”>‘.”\n”;
}
if ($foursquare) {
$social_icons .= ‘<li class=”foursquare”>‘.”\n”;
}
if ($instagram) {
$social_icons .= ‘<li class=”instagram”>‘.”\n”;
}
if ($github) {
$social_icons .= ‘<li class=”github”>‘.”\n”;
}
if ($xing) {
$social_icons .= ‘<li class=”xing”>‘.”\n”;
}
} else {

$social_type = explode(‘,’, $type);
foreach ($social_type as $id) {
if ($id == “twitter”) {
$social_icons .= ‘<li class=”twitter”>‘.”\n”;
}
if ($id == “facebook”) {
$social_icons .= ‘<li class=”facebook”>‘.”\n”;
}
if ($id == “dribbble”) {
$social_icons .= ‘<li class=”dribbble”>‘.”\n”;
}
if ($id == “youtube”) {
$social_icons .= ‘<li class=”youtube”>‘.”\n”;
}
if ($id == “vimeo”) {
$social_icons .= ‘<li class=”vimeo”>‘.”\n”;
}
if ($id == “tumblr”) {
$social_icons .= ‘<li class=”tumblr”>‘.”\n”;
}
if ($id == “skype”) {
$social_icons .= ‘<li class=”skype”>‘.”\n”;
}
if ($id == “linkedin”) {
$social_icons .= ‘<li class=”linkedin”>‘.”\n”;
}
if ($id == “googleplus” || $id == “google-plus” || $id == “google+”) {
$social_icons .= ‘<li class=”googleplus”>‘.”\n”;
}
if ($id == “flickr”) {
$social_icons .= ‘<li class=”flickr”>‘.”\n”;
}
if ($id == “pinterest”) {
$social_icons .= ‘<li class=”pinterest”>‘.”\n”;
}
if ($id == “foursquare”) {
$social_icons .= ‘<li class=”foursquare”>‘.”\n”;
}
if ($id == “instagram”) {
$social_icons .= ‘<li class=”instagram”>‘.”\n”;
}
if ($id == “github”) {
$social_icons .= ‘<li class=”github”>‘.”\n”;
}
if ($id == “xing”) {
$social_icons .= ‘<li class=”xing”>‘.”\n”;
}

$social_icons .= ‘<li class=”phone”>‘.”\n”;

}
}

$output = ‘<ul class=”social-icons ‘.$size.’ ‘.$style.'”>’.”\n”;
$output .= $social_icons;
$output .= ‘‘.”\n”;

return $output;
}
add_shortcode(“social”, “sf_social_icons”);
}

March 1, 2014 at 2:01 am #53084
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
You most welcome .I amglad that issue fixed . Please activate your child theme and put this code functions.php at /wp-content/themes/dante-child/ . So you can keep this after update .
```
/* SOCIAL SHORTCODE
	================================================= */
	if (!function_exists('sf_social_icons')) {
		function sf_social_icons($atts, $content = null) {
			extract(shortcode_atts(array(
			 "type" => '',
			 "size" => 'standard',
			 "style" => ''
			), $atts));
			
			$options = get_option('sf_dante_options');
	
			$twitter = $options['twitter_username'];
			$facebook = $options['facebook_page_url'];
			$dribbble = $options['dribbble_username'];
			$vimeo = $options['vimeo_username'];
			$tumblr = $options['tumblr_username'];
			$skype = $options['skype_username'];
			$linkedin = $options['linkedin_page_url'];
			$googleplus = $options['googleplus_page_url'];
			$flickr = $options['flickr_page_url'];
			$youtube = $options['youtube_url'];
			$pinterest = $options['pinterest_username'];
			$foursquare = $options['foursquare_url'];
			$instagram = $options['instagram_username'];
			$github = $options['github_url'];
			$xing = $options['xing_url'];
			
			$social_icons = '';
			
			if ($type == '') {
				if ($twitter) {
					$social_icons .= '<li class="twitter"><a href="http://www.twitter.com/'.$twitter.'" target="_blank"></a></li>'."\n";
				}
				if ($facebook) {
					$social_icons .= '<li class="facebook"><a href="'.$facebook.'" target="_blank"></a></li>'."\n";
				}
				if ($dribbble) {
					$social_icons .= '<li class="dribbble"><a href="http://www.dribbble.com/'.$dribbble.'" target="_blank"></a></li>'."\n";
				}
				if ($youtube) {
					$social_icons .= '<li class="youtube"><a href="'.$youtube.'" target="_blank"></a></li>'."\n";
				}	
				if ($vimeo) {
					$social_icons .= '<li class="vimeo"><a href="http://www.vimeo.com/'.$vimeo.'" target="_blank"></a></li>'."\n";
				}
				if ($tumblr) {
					$social_icons .= '<li class="tumblr"><a href="http://'.$tumblr.'.tumblr.com/" target="_blank"></a></li>'."\n";
				}
				if ($skype) {
					$social_icons .= '<li class="skype"><a href="skype:'.$skype.'" target="_blank"></a></li>'."\n";
				}
				if ($linkedin) {
					$social_icons .= '<li class="linkedin"><a href="'.$linkedin.'" target="_blank"></a></li>'."\n";
				}
				if ($googleplus) {
					$social_icons .= '<li class="googleplus"><a href="'.$googleplus.'" target="_blank"></a></li>'."\n";
				}
				if ($flickr) {
					$social_icons .= '<li class="flickr"><a href="'.$flickr.'" target="_blank"></a></li>'."\n";
				}
				if ($pinterest) {
					$social_icons .= '<li class="pinterest"><a href="http://www.pinterest.com/'.$pinterest.'/" target="_blank"></a></li>'."\n";
				}
				if ($foursquare) {
					$social_icons .= '<li class="foursquare"><a href="'.$foursquare.'" target="_blank"></a></li>'."\n";
				}
				if ($instagram) {
					$social_icons .= '<li class="instagram"><a href="http://instagram.com/'.$instagram.'" target="_blank"></a></li>'."\n";
				}
				if ($github) {
					$social_icons .= '<li class="github"><a href="'.$github.'" target="_blank"></a></li>'."\n";
				}
				if ($xing) {
					$social_icons .= '<li class="xing"><a href="'.$xing.'" target="_blank"></a></li>'."\n";
				}
			} else {
			
				$social_type = explode(',', $type);
				foreach ($social_type as $id) {
					if ($id == "twitter") {
						$social_icons .= '<li class="twitter"><a href="http://www.twitter.com/'.$twitter.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "facebook") {
						$social_icons .= '<li class="facebook"><a href="'.$facebook.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "dribbble") {
						$social_icons .= '<li class="dribbble"><a href="http://www.dribbble.com/'.$dribbble.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "youtube") {
						$social_icons .= '<li class="youtube"><a href="'.$youtube.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "vimeo") {
						$social_icons .= '<li class="vimeo"><a href="http://www.vimeo.com/'.$vimeo.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "tumblr") {
						$social_icons .= '<li class="tumblr"><a href="http://'.$tumblr.'.tumblr.com/" target="_blank"></a></li>'."\n";
					}
					if ($id == "skype") {
						$social_icons .= '<li class="skype"><a href="skype:'.$skype.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "linkedin") {
						$social_icons .= '<li class="linkedin"><a href="'.$linkedin.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "googleplus" || $id == "google-plus" || $id == "google+") {
						$social_icons .= '<li class="googleplus"><a href="'.$googleplus.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "flickr") {
						$social_icons .= '<li class="flickr"><a href="'.$flickr.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "pinterest") {
						$social_icons .= '<li class="pinterest"><a href="http://www.pinterest.com/'.$pinterest.'/" target="_blank"></a></li>'."\n";
					}
					if ($id == "foursquare") {
						$social_icons .= '<li class="foursquare"><a href="'.$foursquare.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "instagram") {
						$social_icons .= '<li class="instagram"><a href="http://instagram.com/'.$instagram.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "github") {
						$social_icons .= '<li class="github"><a href="'.$github.'" target="_blank"></a></li>'."\n";
					}
					if ($id == "xing") {
						$social_icons .= '<li class="xing"><a href="'.$xing.'" target="_blank"></a></li>'."\n";
					}
					
						$social_icons .= '<li class="phone"><a href="http://jspigner.pairserver.com/contact-us/" target="_blank"></a></li>'."\n";
					
				}
			}
			
			$output = '<ul class="social-icons '.$size.' '.$style.'">'."\n";
			$output .= $social_icons;
			$output .= '</ul>'."\n";
			
			return $output;
		}
		add_shortcode("social", "sf_social_icons");
	}
	
```
With Best Regards
Swift Ideas
March 1, 2014 at 11:14 pm #53188

Kimley
Member

Post count: 15

Great! Thanks so much again for all your help!

Kimley

March 3, 2014 at 11:42 am #53473

Kyle – SUPPORT
Moderator

Post count: 35880

Great! 🙂

April 2, 2014 at 3:04 pm #63815

tracytracy
Member

Post count: 29

Ok,I have the same question (wanting to add another icon in the social icon header) but I haven’t figured out how to change the code to add just ONE single icon instead of one icon after every social icons

the code that was posted above:

$social_icons .= '<li class="envelope"><a href=".../contact-us/" target="_blank"></a></li>'."\n";

returns a page result of *twitter icon* *envelope icon* *facebook icon* *envelope icon* *github icon* *envelope icon* *youtube icon* *envelope icon* *flickr icon* *envelope icon*

instead of the desired look of adding just the ONE icon at the end of the string.

And my mucking about in the shortcodes.php trying to decipher how to change the above code isn’t working.
How do I modify the code to add an additional icon in that row?
thanks

April 2, 2014 at 3:40 pm #63830

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
You used right code as i see . Please provide your website URl so i can check .

Thanks

April 2, 2014 at 4:02 pm #63841

tracytracy
Member

Post count: 29

I’m building this on a test server so I can’t share – I *only* added the extra code to the shortcodes.php file. Attaching a screen shot.

April 2, 2014 at 4:13 pm #63849

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
Where and how many times you added this code ?
$social_icons .= '<li class="envelope"><a href=".../contact-us/" target="_blank"></a></li>'."\n";
Please attach shortcodes.php as zip so i can correct your code .

Thanks

April 2, 2014 at 4:36 pm #63861

tracytracy
Member

Post count: 29

As I previously posted:

I *only* added the extra code to the shortcodes.php file.

I didn’t touch any other file. I followed the directions you posted above in reply #52736 and added the code to the shortcodes.php page

dante/swift-framwork/shortcodes.php

April 2, 2014 at 4:45 pm #63870
Kimley
Member

Post count: 15
Hi tracytracy,

I had the same issue that you’re having. I altered the code as follows (obviously change your link and the icon you wish to use):
```
					if ($id == "phone") {
						$social_icons .= '<li class="phone"><a href="http://www.visionfirst.com/contact-us/"></a></li>'."\n";
					}
```
Let me know if you need any further clarification. Hope that helps!

Kimley
April 2, 2014 at 4:48 pm #63874

Mohammad – SUPPORT
Moderator

Post count: 27441

@tracytracy – please attach your shortcodes so i can check in detail .
Thanks

April 2, 2014 at 4:58 pm #63880

tracytracy
Member

Post count: 29

Kimley – Thanks, but just copy&pasting that code exactly just changes my results to having four little phone icons in the header instead of 4 little envelopes 😉 Obviously there is a key here that I’m missing.

Is there more than this single step involved when wanting to add additional icons into the top header bar along side the social media icons?
Back to forum

Posted in: Dante

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

You must be logged in and have valid license to reply to this topic.

License required for one of the following items

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

Support Request

Support Policy

Privacy Policy