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 370 posts 907 karma points
    Sep 12, 2018 @ 04:21
    John Bergman
    0

    Iconic for FontAwesome Pro

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

    enter image description here

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

    enter image description here

    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.

  • bob baty-barr 1178 posts 1291 karma points MVP
    Sep 12, 2018 @ 12:25
    bob baty-barr
    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?

  • Frans de Jong 386 posts 1323 karma points c-trib
    Sep 12, 2018 @ 14:29
    Frans de Jong
    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?

  • John Bergman 370 posts 907 karma points
    Sep 13, 2018 @ 03:38
    John Bergman
    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

  • Frans de Jong 386 posts 1323 karma points c-trib
    Sep 13, 2018 @ 06:55
    Frans de Jong
    0

    Can you for testing purposes include fontawesome 4?

  • Christopher 22 posts 157 karma points
    Sep 13, 2018 @ 10:12
    Christopher
    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:

    FontAwesome Free 5.3.1

    And this is the configuration needed in Iconic:

    Iconic Configuration for FontAwesome Free 5.3.1

    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.

  • John Bergman 370 posts 907 karma points
    Sep 14, 2018 @ 02:33
    John Bergman
    0

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

  • Christopher 22 posts 157 karma points
    Sep 14, 2018 @ 09:54
  • John Bergman 370 posts 907 karma points
    Sep 14, 2018 @ 23:21
    John Bergman
    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?

  • Christopher 22 posts 157 karma points
    Sep 18, 2018 @ 11:04
    Christopher
    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.

  • Dallas 3 posts 72 karma points c-trib
    Sep 27, 2018 @ 05:33
    Dallas
    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?

Please Sign in or register to post replies

Write your reply to:

Draft