New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font Awesome 5 support? #3

Closed
fncll opened this Issue Dec 6, 2018 · 11 comments

Comments

Projects
None yet
2 participants
@fncll
Copy link

fncll commented Dec 6, 2018

Any chance of an update to support Font Awesome 5? I tried using a custom location in the Font Awesome 4 Menus plugin settings but it didn't quite work (I got a rectangle where there should have been a Mastodon icon which are available in version 5). I also tried adding the v5 info to the header using a plugin, but that didn't seem to work either (probably due to the FA5 change to the css classes used).

At any rate, I might just hack around a bit and try to create a Font Awesome 5 version of the plugin.

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Dec 6, 2018

Looking into it, the structure of 5 is different, and I use a plugin that does version 4. This script might be a way I toss in to handle version 4 classes to 5.

https://gist.github.com/timint/fb53929ff196d0a5754188bd93a80cef

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Dec 7, 2018

And I thought this might help but it does not

https://wordpress.org/support/topic/font-awesome-version-5-update-2/

I think it needs a whole redo approach...

@fncll

This comment has been minimized.

Copy link

fncll commented Dec 7, 2018

Yeah, that's why I was thinking about taking the approach of modifying the plugin...though it might be more straightforward. I would really like to get at a few of the FA5 icons, including Mastodon and some better options for newsletter links.

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Dec 7, 2018

I'm pretty sure the plugin could be modified, but besides just linking to a CSS it also has to link in a JavaScript file, and the code logic on the parsing of CSS needs some brain work to sort out. Seems worth having better icons I agree.

@fncll

This comment has been minimized.

Copy link

fncll commented Dec 7, 2018

Right...if I do work on the plugin, I will share. But changing the theme in a useful way for others is a different beast because of backward compatibility.

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Dec 7, 2018

It might be easier to add to the theme, as the plugin does quite a few things not strictly needed. I've got some theme check stuff that I can test for existence of the plugin, and suggest deactivating as an admin notice.

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Jan 2, 2019

Here is a hacky approach that seems to work. It involves an edit of the plugin:

(1) Comment out lines 164-166 of n9m-font-awesome-4.php

    /*
     if( !in_array( 'fa', $classes ) ){
         array_unshift( $classes, 'fa' );
     }
     */

(2) In the Font Awesome 4 Menus settings, use the option to load CSS from a custom location, I used

https://use.fontawesome.com/releases/v5.6.3/css/all.css

fa5

(3) For the menu CSS classes, use the full specs like fab fa-mastodon or 'far fa-clock`

(4) The CSS is a bit messed up, I had to add custom CSS

#menu-social i {
    font-style: normal;
    font-size: 2em;
}

It's a bit convoluted, trying to determine best approach for mortals.

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Jan 3, 2019

Change that, I've done a rewrite to the plugin- give this a spin! https://github.com/cogdog/font-awesome-5-menus

@fncll

This comment has been minimized.

Copy link

fncll commented Jan 8, 2019

It works! I had to remove the label from the menu items, otherwise the label text was showing, which it didn't before, but this behavior is arguably more logical than the original :)

@fncll

This comment has been minimized.

Copy link

fncll commented Jan 8, 2019

Actually, I take that 2nd part back: that was just an artifact in the customizer...turns out you DO need the labels and the text doesn't show up in the "real" thing! Thanks for fixing this (I've been too busy torturing myself with learning some Python to even make a crack at it).

@cogdog

This comment has been minimized.

Copy link
Owner

cogdog commented Jan 8, 2019

The labels are supposed to wrap below, but never seem right. I prefer label-less.... in my themes I hide them just in case with CSS

span.fontawesome-text {
    display: none;
}

@cogdog cogdog closed this Jan 8, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment