Jump to content
bernhard

RockAwesome - FontAwesome Icon Picker

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 11

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
54 minutes ago, netcarver said:

Thanks for this. There is also Marc's FontAwesomePro module that might be similar.

Thx @netcarver, but that does not seem to be an IconPicker Inputfield, or am I missing something? 🙂 Anyway, it's always good to have options 🙂 

Share this post


Link to post
Share on other sites

@bernhard Thank you ! I fixed repo and thread broken images. Module allow you to add custom icons via hook and maybe i can or someone can add support for config file support like my Mystique module.

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Just added an option to load FontAwesome5 on all admin pages:

LibtGu3.png

Share this post


Link to post
Share on other sites

v0.0.2 Just added some setup instructions and checks on install/uninstall thx to a report of @thausmann

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi @MilenKo glad you got it working. Do you think the readme could be improved? Would be nice to get a suggestion of how I could make it more obvious. 🙂 

Share this post


Link to post
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 😉

Share this post


Link to post
Share on other sites

Thx, updated readme

Share this post


Link to post
Share on other sites

Awesome module @bernhard, adding it to my default installation profile.

  • Thanks 1

Share this post


Link to post
Share on other sites

@bernhard this only works if you type in lowercase, is there anything that can be done (I know all Font Awesome icons are named in lower)?

Share this post


Link to post
Share on other sites

Hi, bernhard. Interesting module.
But how output the icon to front end page?

 

PW has "Advanced" fields option with icons choose. It works fine for the backend.
It will be cool to add it in your module.

PW-icons.JPG

Share this post


Link to post
Share on other sites

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>")

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...