Font Awesome Icons Not Working/ Author Bio Box / Integrity Stack

[fantasy_5]

Hi!

I created a custom bio for my single posts page and I need some help displaying the font awesome icons and editing the author box itself. the author box is coded properly and works on my other website where I am using X icon stack. It looks like this…

I also want it to look like this on my shop website, but it currently looks like this…

There was 1 piece of code added to functions and an additional one to style.css and I added the link to make font awesome icons work properly. See below…

Blockquote
function wpb_author_info_box( $content ) {

global $post;

// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {

// Get author’s display name
$display_name = get_the_author_meta( ‘display_name’, $post->post_author );

// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( ‘nickname’, $post->post_author );

// Get author’s biographical information or description
$user_description = get_the_author_meta( ‘user_description’, $post->post_author );

// Get author’s website URL
$user_website = get_the_author_meta(‘url’, $post->post_author);

// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( ‘ID’ , $post->post_author));

if ( ! empty( $display_name ) )

$author_details = '

About ’ . $display_name . ‘

’;

if ( ! empty( $user_description ) )
// Author avatar and bio

$author_details .= ‘

’ . get_avatar( get_the_author_meta(‘user_email’) , 90 ) . nl2br( $user_description ). ‘

’;

$author_details .= 'View all posts by ’ . $display_name . ‘’;

// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {

// Display author website link
$author_details .= ’ | Website’;

} else {
// if there is no author website then just close the span
$author_details .= ‘’;
}

// Insert author social contact

  $twitterHandle = get_the_author_meta('twitter',get_the_author_meta('ID'));
  $facebookHandle = get_the_author_meta('facebook', get_the_author_meta('ID'));
  $googleplusHandle = get_the_author_meta('googleplus', get_the_author_meta('ID'));


  
  $instagramHandle = get_the_author_meta('instagram',get_the_author_meta('ID'));
  $linkedinHandle = get_the_author_meta('linkedin', get_the_author_meta('ID'));
  
  $youtubeHandle = get_the_author_meta('youtube', get_the_author_meta('ID'));
  $whatsappHandle = get_the_author_meta('whatsapp', get_the_author_meta('ID'));
  $weiboHandle = get_the_author_meta('weibo', get_the_author_meta('ID'));
  $quoraHandle = get_the_author_meta('quora', get_the_author_meta('ID'));
  $snapchatHandle = get_the_author_meta('snapchat', get_the_author_meta('ID'));
  $pinterestHandle = get_the_author_meta('pinterest', get_the_author_meta('ID'));
  $redditHandle = get_the_author_meta('reddit', get_the_author_meta('ID'));
  $tumblrHandle = get_the_author_meta('tumblr', get_the_author_meta('ID'));
  $soundcloudHandle = get_the_author_meta('soundcloud', get_the_author_meta('ID'));

if ( !empty ($twitterHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($facebookHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($googleplusHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($redditHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($instagramHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($linkedinHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($youtubeHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($whatsappHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($weiboHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($quoraHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($snapchatHandle) ) { 

$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($pinterestHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($tumblrHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

if ( !empty ($soundcloudHandle) ) {
$author_details .= ‘’ . '| ';
} else {
$author_details .= ‘’;
}

// Pass all this info to post content
$content = $content . ‘’ . $author_details . ‘’;
}
return $content;
}

// Add our function to the post content filter
add_action( ‘the_content’, ‘wpb_author_info_box’ );

// Allow HTML in author bio section
remove_filter(‘pre_user_description’, ‘wp_filter_kses’);

Blockquote

#author-social-handle {
color: #00a8ff;
}
#author-social-handle .fa { /* social icon - FontAwesome */
line-height: 1.2em;
text-shadow: none;
width: 15.6px;
}
.author a#author-social-handle,
.author a#author-social-handle:visited {
background: #fff;
color: #c4a284;
font-size: 18px;
margin: 0 3px;
padding: 6px;
text-align: center;
}
.author a#author-social-handle:hover {
background: #fff;
color: #00a8ff;
}

This is the link that is added to header.php to make font awesome icons work…

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

[ruenel]

Hello There,

Thanks for the very detailed post information. I have logged in to your site and resolve the issue already. I simply updated this custom css:

#author-social-handle .fa {
    line-height: 1.2em;
    text-shadow: none;
    width: 15.6px;
    font-family: "fontawesome";
}

I added the font-family: "fontawesome"; by the way.

Please check your site now.

[fantasy_5]

Hi, RueNel!

I checked, but I still don’t see the icons even after clearing my browsers cache.

[thai]

Hi There,

Could you please try adding this custom CSS also?

.fa-facebook-f:before, .fa-facebook:before {
    content: "\f09a" !important;
}

Hope it helps