support@gracethemes.com

Font Awesome tooltip

Home Support Combine WordPress Theme Font Awesome tooltip

This topic contains 2 replies, has 2 voices, and was last updated by  Grace Themes 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10246

    Keith Sykes
    Participant

    Hi,

    How do I amend the code for Social Media icons, so that the tooltip (hover) shows correctly?

    The code is below…

    [social_area]
    [social icon=”fab fa-facebook-f”
    link=”https://www.facebook.com/5starcases/”]
    [social icon=”fab fa-twitter” link=”https://twitter.com/5Star_Cases”]
    [social icon=”fab fa-linkedin-in” link=”https://www.linkedin.com/company/5-star-cases-
    limited/”]
    [social icon=”fab fa-instagram” link=”https://www.instagram.com/5star_cases/”]
    [/social_area]

    There are some links already added.

    The tooltips (hover) need to show just the social media name but instead they show “fab fa-facebook-f” etc.

    #10259

    Grace Themes
    Keymaster

    Hi,

    Can you please send your website URL and WordPress admin login details for temporary at support@gracethemes.com so we can check and solve this issue?

    Regards
    Grace Themes

    #10262

    Grace Themes
    Keymaster

    Hi,

    Please make the below code changes to display the ToolTip on mouse hover for top social media icon and footer social media section

    Go to Appearance -> Editor -> inc/custom-functions.php

    at line no. 499 you will find the below code

    function combine_pro_social($atts){
     extract(shortcode_atts(array(
      'icon' => '',
      'link' => ''
     ),$atts));
      return '<a href="'.$link.'" target="_blank" class="'.$icon.'" title="'.$icon.'"></a>';
     }
    add_shortcode('social','combine_pro_social');

    Now change it to the following code:

    function combine_pro_social($atts){
     extract(shortcode_atts(array(
      'icon' => '',
      'title' => '',
      'link' => ''
     ),$atts));
      return '<a href="'.$link.'" target="_blank" class="'.$icon.'" title="'.$title.'"></a>';
     }
    add_shortcode('social','combine_pro_social');

    Now Go to Appearance -> Theme Options-> Basic Settings -> Header Top Social Icon -> Add Title field ( title=”Facebook” )

    [social_area]
    [social icon=”fab fa-facebook-f” title=”Facebook” link=”https://www.facebook.com/5starcases/”]
    [social icon=”fab fa-twitter” title=”Twitter” link=”https://twitter.com/5Star_Cases”]
    [social icon=”fab fa-linkedin-in” title=”LinkedIn” link=”https://www.linkedin.com/company/5-star-cases-limited/”]
    [social icon=”fab fa-instagram” title=”Instagram” link=”https://www.instagram.com/5star_cases/”]
    [/social_area]

    Go to Appearance -> Theme Options-> Footer -> Footer Social Icon -> Add Title field

    [social_area]
    [social icon=”fab fa-facebook-f” title=”Facebook” link=”https://www.facebook.com/5starcases/”]
    [social icon=”fab fa-twitter” title=”Twitter” link=”https://twitter.com/5Star_Cases”]
    [social icon=”fab fa-linkedin-in” title=”LinkedIn” link=”https://www.linkedin.com/company/5-star-cases-limited/”]
    [social icon=”fab fa-instagram” title=”Instagram” link=”https://www.instagram.com/5star_cases/”]
    [/social_area]

    Regards
    Grace Themes

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

You must be logged in to reply to this topic.