Jump to content

RockAwesome - FontAwesome Icon Picker


bernhard
 Share

Recommended Posts

RockAwesome

ProcessWire Fieldtype to easily choose FontAwesome Icons

Usage

  • Install the module.
  • Set paths in the Inputfield's settings page.
  • Add a RockAwesome field to any template (or change an existing TEXT field).

Preview

0zy8F1r.gif

 

https://modules.processwire.com/modules/fieldtype-rock-awesome/

https://github.com/BernhardBaumrock/RockAwesome

  • Like 12
Link to comment
Share on other sites

Hi @ukyo I knew there where some Icon Pickers already, but thought it would be fun to build my own ? Also in your module's thread the images are broken, so I didn't get a good first impression... How would I make your module work with a paid version of FontAwesome? Is that possible?

  • Like 1
Link to comment
Share on other sites

Hi @ukyo thx for fixing the images. Ok now I also got how one can use their own icons, nice work ? 

9 hours ago, ukyo said:

I didn't add Font Awesome 5 support, because when you load FontAwesome 5 assets, it's breaking admin icons.

Could you please elaborate a little more on that? I didn't see any problems so far.

Link to comment
Share on other sites

  • 2 weeks later...
  • 3 months later...
  • 4 weeks later...
  • 1 month later...

Hello @bernhard

Thank you for your module. I decided to give it a try for an existing project that would like to switch to v5. So I uploaded the /css and /media folders of the free version and set the path to be correctly pointing to the corresponding files.

After creating a field and assigning it to a template, I was able to search for the new icons version, but they did not appear correctly.

After a bit of testing, I was able to restore the proper functionality by copying the /webfonts folder besides the css and media

Just mentioning it in case someone else stumbles upon the same issue. Not sure if it is because the profile already is loading some libraries of FA4 but I just made it work so am quite happy to use it ?

  • Like 1
Link to comment
Share on other sites

Hello @bernhard My only suggestion would be to add to the readme to not forget to copy webfonts folder as well. I have tested the module on a working profile that has been set to use FAv4. I must say that it allows me to combine both and have a slow transitioning if I have to move to FAv5 vonoletely. Or eventually extend the variety of icons if the project requires it ?

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...
3 minutes ago, bernhard said:

Hi @Alkrav

sorry, I don't understand your question. You access the icon code via $page->your_icon_fieldname and display that icon as you like (eg "<i class='{$page->icon}'></i>")

Hi, @bernhard Thanx and yes, i have already find answer for the 1 part of my question. And add at the top of frontend template this line: <link rel="stylesheet" href="/site/templates/fontawesome/css/all.css" type="text/css">

But second part is about adding and using ready solution of PW in backend. Preview on screenshot.

Link to comment
Share on other sites

  • 1 year later...

Hello Bernhard,
today officially FontAwesome 6.0.0 came out.
The metadata that RockAwesome is built on is no longer included.
I have integrated the new GraphQL interface locally into the module to search for icons.
Would you be interested in adding it directly to RockAwesome? The interface is accessed directly from JS.
ciao
Sebastian

Screenshot 2022-02-09 120406.jpg

  • Like 1
Link to comment
Share on other sites

hi sebastian,

thx for letting me know! I'm not sure what you mean. I understood that my module will not work with FA6, but what is your suggestion? Did you find a way to make it work with both old and new versions? I've only used this module on one project so I don't want to touch anything if not needed ? but if you have a better solution I'm happy to pull changes if that does not break anything else.

Link to comment
Share on other sites

Font Awesome no longer provides the metadata as a file. Instead, they have set up a Graph QL API, which can be used to query all information about the icons. Even a text search (like on the FA page) is possible. So your search will work perfectly again.
All info about this can be found on the blog: https://blog.fontawesome.com/font-awesome-icon-metadata/

You can also query old versions. So it should be possible that your project still works. The used version has to be configured of course.

But you could add some extensions in the module settings:
- Free and Pro Version
- possibly own kit version
- Selection of styles
Maybe I should fork RockAwesome better?

By the way, I use Font Awesome in many web projects and RockAwesome is a great help!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...