[Resolved] Adding lightweight social icons to menu does not work

Home Forums Support Adding lightweight social icons to menu does not work

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1341122
    Marc

    I’m trying to add (lightweight) social icons to my menu (turned on ‘use navigation as header’), following this documentation:

    https://docs.generatepress.com/article/adding-icons-to-menu-items/

    Since Font Awesome has been replaced by Lightweight Social Icons, I have installed this plugin:

    https://nl.wordpress.org/plugins/lightweight-social-icons/

    To add the icons to the menu I have replaced <i class="fa fa-facebook"></i> with <i class="lsicon lsicon-facebook"></i> like explained here:

    https://generatepress.com/forums/topic/adding-social-icons-to-menu-items/

    This way no social icons appear in my menu; some space gets taken by ‘something’ but no icons show up…

    The funny thing is: when I add an empty Lightweight Social Icons widget in the top bar area, the icons show up. However, if I move this widget to the header area, the icons disappear again.

    Is there any step-by-step tutorial how to add Lightweight Social Icons to the menu, in website where ‘navigation as header’ has been turned on (and I don’t want to add a widget in a topbar, since I’m not using a top bar)?

    #1341306
    David
    Staff
    Customer Support

    Hi there,

    the Lightweight Social Icons are only loaded if their is an active Lightweight Social Icon widget on the page.

    An alternative no plugin method would be be to add SVGs to the Menu items. You can download the the FontAwesome SVGs here:

    https://fontawesome.com/download

    Grab the Free for Web and find the brand icons you need.
    Open each one in a text editor or IDE.
    You will see something like this – this is the Facebook icon:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>

    Edit this line:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

    to include the fill and height properties like so:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" height="1em">

    Then copy all the code and paste it into the Menu item label. Heres an example of the finished code:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" height="1em" ><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>

    #1341350
    Marc

    Hi David, thanks for pointing me in the right direction! 🙂

    I didn’t like the Facebook icon, so found another one (at https://icons8.com), downloaded it, changed it a bit, and now it looks pretty neat already! This is the code:

    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24px" height="24px"><path d="M 19.253906 2 C 15.311906 2 13 4.0821719 13 8.8261719 L 13 13 L 8 13 L 8 18 L 13 18 L 13 30 L 18 30 L 18 18 L 22 18 L 23 13 L 18 13 L 18 9.671875 C 18 7.884875 18.582766 7 20.259766 7 L 23 7 L 23 2.2050781 C 22.526 2.1410781 21.144906 2 19.253906 2 z"/></svg>

    The online little thing: the icons are located a bit too high regarding the regular items. As if the regular items are vertically in the middle, and the icons are at the top.

    Guess I’ll manage to get it done with some css, but if you know which class to target ideally, that would be of great help 😉

    #1341351
    Marc

    And would be nice to have the social icons a bit closer together…

    Can I add some css code to the svg thing? Just wondering…

    #1341360
    Marc

    Hmm, guess I’m on my way towards a solution…

    Added css class menu-icon through the menu item options. Now targeting this one with css…

    #1341374
    Marc

    Well…

    For Facebook I added this code as menu item label:
    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24px" height="24px"><path d="M 19.253906 2 C 15.311906 2 13 4.0821719 13 8.8261719 L 13 13 L 8 13 L 8 18 L 13 18 L 13 30 L 18 30 L 18 18 L 22 18 L 23 13 L 18 13 L 18 9.671875 C 18 7.884875 18.582766 7 20.259766 7 L 23 7 L 23 2.2050781 C 22.526 2.1410781 21.144906 2 19.253906 2 z"/></svg>

    Assigned css class menu-icon-facebook to it through menu item options, and used this css:

    .menu-icon-facebook {
      top: 5px;
      margin-right: -25px;
    }

    For Instagram I added this code as menu item label:
    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24px" height="24px"><path d="M 11.46875 5 C 7.917969 5 5 7.914063 5 11.46875 L 5 20.53125 C 5 24.082031 7.914063 27 11.46875 27 L 20.53125 27 C 24.082031 27 27 24.085938 27 20.53125 L 27 11.46875 C 27 7.917969 24.085938 5 20.53125 5 Z M 11.46875 7 L 20.53125 7 C 23.003906 7 25 8.996094 25 11.46875 L 25 20.53125 C 25 23.003906 23.003906 25 20.53125 25 L 11.46875 25 C 8.996094 25 7 23.003906 7 20.53125 L 7 11.46875 C 7 8.996094 8.996094 7 11.46875 7 Z M 21.90625 9.1875 C 21.402344 9.1875 21 9.589844 21 10.09375 C 21 10.597656 21.402344 11 21.90625 11 C 22.410156 11 22.8125 10.597656 22.8125 10.09375 C 22.8125 9.589844 22.410156 9.1875 21.90625 9.1875 Z M 16 10 C 12.699219 10 10 12.699219 10 16 C 10 19.300781 12.699219 22 16 22 C 19.300781 22 22 19.300781 22 16 C 22 12.699219 19.300781 10 16 10 Z M 16 12 C 18.222656 12 20 13.777344 20 16 C 20 18.222656 18.222656 20 16 20 C 13.777344 20 12 18.222656 12 16 C 12 13.777344 13.777344 12 16 12 Z"/></svg>

    Assigned css class menu-icon-instagram to it through menu item options, and used this css:

    .menu-icon-instagram {
      top: 7px;
    }

    Not sure if this is the most proper solution, so feedback appreciated 😉

    #1341376
    David
    Staff
    Customer Support

    It works 🙂 So it looks good to me

    #1341380
    Marc

    Cheers mate,
    thanks for the excellent support!

    #1341623
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.