Font Awesome Cheat Sheet App to find the right icon easily

Hi Everyone,
This is my first post in this wonderful forums. I've created an app to search for the right icon (from Font Awesome, free version) in your web (or other platforms) design.
APP on google play:
https://play.google.com/store/apps/details?id=org.apache.cordova.FontAwesomeCS&hl=en

Please have a look, and let me your feedback, suggestions, ideas...etc. I'm also open if you have other ideas for other tools.

For whom those don't know Font Aswom, please visit:
https://fontawesome.com/

Thanks,

 

1) Not sure what this has to do with HTML and Design.

2) Does anyone really need an ad supported crapplet to do what you can do on their website for free at:

https://fontawesome.com/icons?d=gallery

 

Thanks for your feedback, I'm a developer and this android app helps me a lot in development productivity. Hope someone would find it useful
By the way, it is free, and works offline (then will be no ads). Seems you didn't even try it, did you ?

 

Thanks very much for your feedback @sarahk. And yes there is no copy feature.
Anyways, take it easy, originally I made it for my self and it does fit my needs. Now I 'm sharing my little 'fun' project, it might help others.
If you have any suggestions, I'm happy to improve it. If you don't like it that's ok as well, surely not everyone would find it useful.

 

Given I don't do development on the PHONE, or browse this forums from my PHONE, and adblock plus warned me not to install it on my phone...

No, I didn't get that far. And like Sarahk I'm wondering what good it would do me on my PHONE given that I do all my development on a real computer like a laptop or desktop.

... where keeping a browser tab to FA open is far, FAR more useful, particularly since you can just click on their demo <i> tag to have it instantly be copied to your clipboard, so just alt-tab back to the editor and shift-ins.

I don't see how a phone app is a useful development tool compared to a tab on an actual machine suited to development work.

You've actually piqued my curiosity though, as I'm wondering what type of development process you're working with where this would even be helpful.

**NOTE** a desktop APP as a next step, perhaps with something like Electron, would be far, FAR more useful if you made it do MORE than their website does. Right now it does less on a platform that shouldn't even be involved in the process. You should be trying to do MORE on the platform(s) people use to write code.

Because Android isn't it.

Something like listing the CSS (font-family, font-weight) for direct access without the <i> tags? Making the "free" selection permanent when not working under license? There are a number of things I wish FA's icon reference did.

What did you write it in? Is it JS or Kotlin. If it's not JS how much work would it be to port your data set to something more... portable? It's not a horrible idea, you're just on the wrong platform for most developers, and aren't doing anything the website itself seemingly provides. You get it cross platform and get it working better than theirs, then you'll be onto something big.

 

@deathshadow I see your point and really appreciate your detailed feedback and time.

Since you've asked; my simple reason for making and using my app is I found it a huge time saver and here is why:

At first, I was using https://fontawesome.com/icons?d=gallery, they have a nice filter but there are drawbacks:
[working on desktop]
1) I need to switch away from my development Code editor (something I really want to avoid)
2) Opening a browser tap, Using their filter (above link), you will get icon name (i.e: address-book) but still not the full class name (Solid, Regular, or Brands) [my focus on free, so will filter that as well]
3) Click (again) the icon to open another browser tab and find demo/details (i.e: <i class="far fa-address-book"></i>), Now Copy
My note: I found loading the icon browser page is quite slow (might be their server or my Internet speed, but a serious issue for me)
4) Switch back to Code editor and paste it (save and view the results on a browser) (doing that repeatedly until found the right icon)

For me that was a time consuming, especially I do care about the final touches and picking the right icons, so I thought I need another screen (with faster search, pre-loaded, results)
1) My Code editor is still open
2) In my Font Awesome CS app I search the right icon, memorizing the icon/class name
3) Typing/testing the font classes without leaving the development Code editor. (save and view the results on a browser)
[I make hybrid apps, so it kind of testing as well]

At first, the live search was kind of slow on my phone and I spent some time speeding things up and I'm happy with the final result. I confident at this point it worth sharing, otherwise I will not do that.

So, after you knew the reason, does that make sense? Do you think my app can be improved? You mentioned "There are a number of things I wish FA's icon reference did.", do you think we can include them in my app (if yes, please provide details)?

 

Sorry, I just edited my above reply (just rephrased some words, to make it clearer). [changes are underlined]

 

So don't maximize, it's not like code is "widescreen friendly" to begin with. Though @sarahk and I have the slight advantage of using multiple display workstations. That way the editor and browser can both stay open. I generally when working in my editor of choice -- which is NOT tabbed -- have my source code open side-by-side-by-side. Part of why I hate IDE's. Be it assembler, C, Pascal, HTML, CSS, JS, etc, etc, cramming it all into one window seems really stupid, much less all the screen-space wasting extra crap IDE's and RAD's saddle you with. YMMV. For example when working on websites I have HTML/PHP, CSS, and JS usually all open on my left display side-by-side so I can refer to each at once. Which is part of why this derpy "shove it all into one file" idiocy bugs me no end. Not only are people pissing on caching models by stuffing stuff into the markup that has no damned business in the markup like CSS and JS, they're also making it harder to work with by having to constantly scroll up and down.

Leave the tab open when developing. I have several references I keep open all the time. This is more expedient if you use portrait mode tabs like in Vivaldi. I run the system taskbar on the left, and browser tabs on the right to maximize the available height, which is the direction most web and source are oriented.

Side note, I hear now that Edge is going Blink/V8 (Chromium) on desktop that they're bringing portrait mode tabs to it. The ONE thing that might make me give it a chance!

As things I'd leave open, I don't find alt-tab, type, click, ^C, ^V time consuming. At least no more so than manually copying the information and getting hard to read tiny little phone display invovled. Particularly when it comes to typing on those things. But I'm weird, I use my phone as a ... well, phone; and damned little else. They're too small to fit content at a reasonable / legible size, typing on them is useless crap, etc, etc.... and get off my lawn.

As it would be in alt-tabbing or not making everything take full screen size.

With over 5000 of them, that seems an exercise in futility.

Again, alt-tab is your friend. It's not like you have to close anything, you're just switching between them. Unless you're on some garbage inaccessible OS UI with crippled multitasking controls (OSX) it should be a non-issue.

Again, phone just really REALLY seems like the wrong tool. I cannot see the advantage of getting a phone involved. Between the useless tiny display, difficulty in typing much of anything, and the massive amount of screen real-estate available on any decent development platform... Why the phone?

Are you on a quackintosh with crippled multi-tasking control? Do you just not know the keyboard shortcuts for switching between programs? Are you so screen real-estate restricted you don't have the room for the tabs in your browserS? (yes, plural. If you're testing in browsers usually you should have three or four open at once)

Not really, because picking up one of these rinky tiny phones, dealing with the tiny text and hard to type "touch screen", manually copying whilst trying to use two devices at once? That seems many, MANY times harder than just having the tab open all the time in one of the many browsers I have open and alt-tabbing between them even when I'm on the laptop, much less my actual development workstation.

I think there might be serious issues with your workflow if you're on the phone all the time whilst "developing". Even when developing FOR phones that's what Android studio or bluestacks are for.

1) Make it cross platform. Few people are going to have much use for this on a phone; because people don't do development on a phone even when writing FOR phones.

2) Make it remember if you restrict the search to free. One of the biggest problems with FA's icon lookup is that every time you do a search, it de-selects if you asked for just the free ones or not. THAT is an extra step that needs to go.

3) Allow searches both by some form of "tags" or by actually being part of the name. FA's reference internally uses some sort of tagging system since you get results related that are not matches. Sometimes (rarely) I do remember the fa- name, but can't remember if it's FAS, FAB, etc... and having all the other "related" ones in the way on screen is a PITA.

4) Perhaps keep an up to date list of CDN repositories that don't suck? No offense to Font-awesome but it's far less awesome if you use their derpy CDN, much less their having recently gone full Gungan with the idiotic haltwitted "scripting only" incompetence introduced in 5. Meesa says yews nevah goes FULL Gungan.. A situation only made worse by their anonymous cross-origin not including a huffing checksum. /FAIL/ at CSP.

There's a reason I have:
https://cdnjs.com/libraries/font-awesome

In the development folder of my Vivaldi speed dial. Shame they don't store the correct sub-tab of the page in the URI like via a hash or something, given I would NEVER EVER use the re-re halfwit scripttard version they seem to want everyone to switch to. If you're loading fonts via <script> you're doing something WRONG... though the same can be said for their sudden raging chodo for SVG.

It's sad watching font-awesome shit their own bed. Here's hoping they don't make it JS only removing the normal <link> way of doing things in future versions, because this using a <Script> thing is quite special. In the same way some olympics are special.

 

Very impressive!

I see your point, thanks very much, and special thanks for introducing Vivaldi (I will give it a try).

I agree, having a tool on the browser is great, so I can summarize the improvement as follows:

1] I need to make the tools available on a browser/web-based application
2] It will be always targeting free icons (no need to remember)
3] Searching by being part of the name is already available, (but searching by tags we need to find the source of FA tagging system, could someone help us to find the icon list per tag so I will import it)

Before proceeding, I will be happy to hear from other members as well. Are there any other improvements or feedback.