Support » Theme: Pictorico » social media icons on top menu

  • Resolved srnb

    (@imonlyhappywhenitravel)


    Hi,
    How can I have social media icons on top (primary) menu? When I add the names to primary menu, they are too long and a second line appears. Icons are better in terms of visualization too. I have it on footer but some pages are too long to go down. Thanks.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi there,

    You could use the following custom CSS to convert the Instagram and Facebook links in your primary menu to icons:

    .main-navigation ul li a[href*="instagram"], 
    .main-navigation ul li a[href*="facebook"] {
        font: normal normal normal 14px/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 0;
    }
    
    .main-navigation ul li a[href*="instagram"]:before,
    .main-navigation ul li a[href*="facebook"]:before {
        font-size: 20px;
    }
    
    .main-navigation ul li a[href*="instagram"]:before {
        content: "\f16d";
    }
    
    .main-navigation ul li a[href*="facebook"]:before {
        content: "\f230";
    }

    Give that a go and let us know if extra questions come up. 🙂

    srnb

    (@imonlyhappywhenitravel)

    Wouv, that’s great, done in seconds :)) Thank you so much!

    Woo hoo! 🎉

    srnb

    (@imonlyhappywhenitravel)

    Hi Siobhan once again,
    Sorry, I think I messed sth up and now the icons are replaced with vertical bars 🙁 Instead of using a plugin, I tried doing the same for the social media icons down below the page on the widget-area by adding custom html on the footer widget and then using your script for the widget-area. What am I missing?

    FontAwesome was used to display the icons in the menu, and that requires that font to be loaded with your theme.

    It sounds like the font was previously being loaded along with a third-party plugin, which you’ve recently disabled.

    If you don’t want to install the plugin again, you could browse for a different plugin in the repository to load FontAwesome. This one, for example, has good ratings:

    https://wordpress.org/plugins/wp-font-awesome/

    srnb

    (@imonlyhappywhenitravel)

    Hi there,
    I didn’t want to use any other font but the script didn’t work in anything else. So, yes, when i installed the font plugin, it’s ok, working.
    Thanks.

    Glad it’s working now!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘social media icons on top menu’ is closed to new replies.