Support » Theme: Gazette » How to add custom social icon to social menu?

  • Resolved backpackingseries

    (@backpackingseries)


    Hello,

    Today, I am working to customize the social menu by adding icons for Flipboard and Bloglovin.

    I tried enqueuing the Font Awesome icons and adding the CSS class under Appearance – Menu.

    function wmpudev_enqueue_icon_stylesheet() {
    wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
    wp_enqueue_style( 'fontawesome');
    }
    add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );

    The icon appears but 1) it does not replace the generic icon, 2) the generic icon is also shown, and 3) the hyperlink stays on the generic icon.

    You may see the results of social menu in the footer here: https://www.backpackingseries.com/

    I am not sure whether what I am doing is the correct method. Can someone please help?

    Thank you
    Kind regards,

Viewing 8 replies - 1 through 8 (of 8 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, in addition to enqueueing the style, you have to create CSS rules for those two icons you want to use. The thing is, fontawesome, from what I can tell, does not have a bloglovin icon.

    This would be an example of the CSS you would need.

    .social-navigation a[href*="bloglovin.com"]::before {
      content: "\f461";
      font-family: 'fontawesome';
    }

    The problem is though, I can’t get any fontawesome icons to show up on your site. Did you also include an @font-face CSS rule to load that font?

    Thank you @sacredpath

    I have inserted the suggested CSS and it has replaced the default genericon for Bloglovin. Yes, Font Awesome does not offer a bloglovin icon. But it does offer a Flipboard icon. Could you please suggest how to insert the Flipboard icon?

    The problem is though, I can’t get any fontawesome icons to show up on your site. Did you also include an @font-face CSS rule to load that font?

    Let me look up this process too!

    Thank you

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, it would be basically the same, but instead of bloglovin.com in the href section it would be flipbook.com, like this, and you would then put in the correct content code.

    .social-navigation a[href*="flipbook.com"]::before {
      content: "\f461";
      font-family: 'fontawesome';
    }

    Thank you very much.

    So, first I installed Font Awesome Integration plugin (instead of editing theme files further) to integrate the Font Awesome library. I guess this should do the job of adding the font?

    2) Added the following to Appearance – Customizer:

    .social-navigation a[href*="flipboard.com"]::before {
      content: "\f44d";
      font-family: 'fontawesome';
    }

    3) Set the value of Appearance-Menus-Social Menu-Custom-Link-CSS Class as fab fa-flipboard

    It does not work! Shows a question mark instead of the desired icon in the footer. What am I missing?

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, every time I try and add some CSS to your site with my web inspector, it freezes my browser and I have to force quit it.

    Did you remove the enqueuing from your functions.php file? With the plugin, that would not be needed. Also, when inspecting your social menu, when I try and inspect the flipbook icon, it comes back and tells me that no element is selected. If I remove the fa-flipboard from the list of CSS classes (that you added via the menu) then I can inspect it.

    Until we get your site stabilized so it isn’t killing my browser, there isn’t a lot I can do. Try removing the enqueuing from the functions.php file and let’s see if that fixes things for me.

    @sacredpath

    Thank you very much for the quick response.

    Yes, I have removed the enqueued font from functions.php before installing the plugin.

    PS: The site should be stable now for you to inspect.

    Kind regards

    @sacredpath

    Apologies for the difficulty you faced last evening. Given the time-pressure in this project, I guess there were multiple things going on and the site behavior was unusual.

    For the same reason, I need to put this request on hold for now. Thank you again for the terrific support to resolve theme-related issues and I will write in again, should anything else come up.

    Kind regards,

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    That’s cool, Just let us know when you are ready to tackle it again.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to add custom social icon to social menu?’ is closed to new replies.