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 339 posts 876 karma points
    1 week ago
    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 1176 posts 1289 karma points MVP
    1 week ago
    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 380 posts 1314 karma points c-trib
    1 week ago
    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 339 posts 876 karma points
    1 week ago
    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 380 posts 1314 karma points c-trib
    1 week ago
    Frans de Jong
    0

    Can you for testing purposes include fontawesome 4?

  • Christopher 22 posts 157 karma points
    1 week ago
    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 339 posts 876 karma points
    1 week ago
    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
    1 week ago
  • John Bergman 339 posts 876 karma points
    1 week ago
    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
    1 week ago
    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.

Please Sign in or register to post replies

Write your reply to:

Draft