[Resolved] Link Primary Navigation, Navigation Search to another page?

[David]

GP stopped using FontAwesome several versions back. If you’re on the most current version of GP than that font is coming from GP….

So for Font Awesome icons, go the FA site, and find your icon e.g envelope:

https://fontawesome.com/icons/envelope?style=solid

Click on the Download SVG File.

Then import that file into this site:

https://jakearchibald.github.io/svgomg/

Once imported select the HTML markup – which will return you the inline SVG code – that looks like this:

<svg aria-hidden="true" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg>

You can then add the SVG inline to any HTML you write, its even supported in the Menu Item.

If you’re working with a lot of Icons you may want to use the Official FA Plugin:

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

I would recommend enabling the SVG option ( so it doesn’t load the entire font library ).
You can then use the HTML markup provided on the FA Site.

[Carsten]

Hi there, thanks for the detailed description of the process of adding an icon. But I’m stucked at this:

You can then add the SVG inline to any HTML you write, its even supported in the Menu Item.

I have been looking in the Menu Item which I expect is in the customize, but I can’t see how I should attach the HTML code to the code below to substitute the generate_do_svg_icon( 'search' ); I’ve been looking through all GP documentations and HTML tutorials, but as much as I would like to learn how, I can’t figure it out. Any help?

<span class="menu-bar-item">
    <a href="/members/me/messages/"><?php echo generate_do_svg_icon( 'search' ); ?>
		<span class="count"><?php echo bp_get_total_unread_messages_count( bp_loggedin_user_id() );?></span></a>
</span>

Thanks!

[Tom]

Hi there,

You would do this:

<span class="menu-bar-item">
    <a href="/members/me/messages/">
        YOUR INLINE SVG HERE
        <span class="count"><?php echo bp_get_total_unread_messages_count( bp_loggedin_user_id() );?></span>
    </a>
</span>

[Carsten]

Hi there, thanks for adding a solution.

Any idea, why the SVS is not in line with the counter, like it was when I used the magnifier with same code?

View post on imgur.com

If I add a Flexbox to .main-navigation .menu-bar-item>a the magnifier svg disappears. How do i get the magnifier svg and the counter in line?

Thanks again

[Tom]

Is there a particular page where I can see that happening?

[Carsten]

Hi there, thanks for looking into this, I have attached credentials

[Tom]

How do I log in? All of the login buttons don’t seem to be doing anything.

[Carsten]

That I do not understand, you can click We, og login in header, or the login buttons in the block?

Sorry for the inconvenience, I just deactivated custom WP login, which might be why you couldn’t login, please try again

thanks

[Carsten]

Any idea, why the svg looks like this in the Dashboard Customize Additional CSS?

View post on imgur.com

View post on imgur.com

Thanks

[Tom]

Try adding this CSS:

.menu-bar-item a {
    display: flex;
    align-items: center;
}

.menu-bar-item a svg {
    width: 1em;
    height: 1em;
}

.menu-bar-item a .count {
    padding-left: 5px;
}

[Carsten]

Hi there, issue solved, thanks for helping me out, Tom, I think these icons looks great in the header.

Apparently I can’t change the size of the mobile menu svg, or the other svg’s in the header, so this can only be done individually with CSS?

Regards

[Tom]

Yes, you will need CSS to adjust those.

[Author]

Posts