iconic for fontawesome pro

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

John Bergman 483 posts 1132 karma points

Sep 12, 2018 @ 04:21

0

Iconic for FontAwesome Pro

I cant seem to get the icon configuration right for font awesome. Here is the directory structure

And the config I am using with the error is as follows

So the question I have is what needs to be in the css path, and what needs to be in the rules source file; the documentation does not match the code from GitHub.

Copy Link
bob baty-barr 1180 posts 1294 karma points MVP

Sep 12, 2018 @ 12:25

0

i am still having challenges with this as well... perhaps a simple tutorial for those of us having trouble closing the gap.

also, any help with icon display when using leblender? @item.GetValue("icon") returns some json... not sure what to do with that?

Copy Link
Frans de Jong 548 posts 1840 karma points MVP 4x c-trib

Sep 12, 2018 @ 14:29

0

I don't know Iconic but fontawesome went from using just fa- plus the iconname to far-, fas-, fal-, etc.

Could that be the problem?

Copy Link
John Bergman 483 posts 1132 karma points

Sep 13, 2018 @ 03:38

0

No, but I think you are right, if I don't used the minified css, I get an error about the regex being incorrect -- unfortunately, there are no styles in the css file, so I am not really sure quite how to configure this up to get it working... any guidance would be appreciated

Copy Link
Frans de Jong 548 posts 1840 karma points MVP 4x c-trib

Sep 13, 2018 @ 06:55

0

Can you for testing purposes include fontawesome 4?

Copy Link
Christopher 28 posts 173 karma points

Sep 13, 2018 @ 10:12
0
This was asked on the Slack group; I showed a solution as I needed it myself as well.

This is the result I ended up with:

And this is the configuration needed in Iconic:

With each CSS file (e.g. /css/font-awesome/fa-brands.css) only containing the rules appropriate to that selector, for example:
```
.fa-500px:before {
    content: "\f26e";
}
.fa-accessible-icon:before {
    content: "\f368";
}
.fa-accusoft:before {
    content: "\f369";
}

[...]
```
It was a little bit of legwork creating those individual CSS files, but REGEX find/replace sped things up so only took a few minutes in reality.

I created mine using FontAwesome Free (v5.3.1) and happy to share the CSS files to save you creating them yourself.
Copy Link
John Bergman 483 posts 1132 karma points

Sep 14, 2018 @ 02:33

0

That would be AWESOME! you can message me in slack to coordinate... cant tell you how much I appreciate that!

Copy Link
Christopher 28 posts 173 karma points

Sep 14, 2018 @ 09:54

100

Here you go https://www.edg3.co.uk/blog/how-to-add-font-awesome-v5-icons-using-iconic-in-umbraco/

Copy Link
John Bergman 483 posts 1132 karma points

Sep 14, 2018 @ 23:21

0

Just added a request to the pro version repo to get a version that is implemented similar to the 4 series.

I wonder if you would share your process for creating the files you created so I can apply that to the pro version?

Copy Link
Christopher 28 posts 173 karma points

Sep 18, 2018 @ 11:04

0

Apologies, only just seen your reply.

I actually found another way on second look. On the Cheatsheet if you view the source there is a JSON object containing every icon - including attributes to say whether they're free/pro and what group (brands/regular/solid) they belong to.

Parsing the JSON is simple (much simpler than the original hacky method REGEX find/replace)!

Have pushed up to a Github repository for ease (and will update the blog post to reflect this):

https://github.com/christopherrobinson/Font-Awesome-Icons/tree/master/css

I'm sure there's an even better way of generating these using the API, but I haven't looked into that.

Copy Link
Dallas 5 posts 74 karma points c-trib

Sep 27, 2018 @ 05:33

0

Christopher, how did you go getting this set up for Font Awesome Pro?

I've tried your method and the Free icons are showing up fine however the Pro Icons are displaying the error icon indicating that there is a validation problem.

I do have Pro, I just don't know how I can provide the validation for Pro Icons to display in the Back Office?

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?