replace easily-breakable fontawesome icons with inline svg instead.

[yochannah]

icons should be svg. svg is trusty. icon fonts invariably break at some point.

Example:

• icons on results table not showing up.. intermine#317
• icons on results not working in firefox / IE 11 intermine#538
• missing icon font stylesheet for Results Tables on Report pages intermine#292

by contrast, inline svg is embedded in the page and can't suffer from CORS

[yochannah]

The icon fonts are breaking.

[yochannah]

See

• https://github.com/intermine/bluegenes/blob/dev/src/cljs/bluegenes/components/icons.cljs
• https://github.com/intermine/bluegenes/blob/dev/src/cljs/bluegenes/views.cljs#L70

for a basic example of how it's done in bluegenes.

[vvijayalakshmi21]

Hi, I am an Outreachy applicant and would like to contribute.
Kindly assign this issue to me

[heralden]

Glad to hear! I have assigned you the issue.

[vvijayalakshmi21]

Thanks so much. Request you to help me set up the project in my local machine. Is there any documentation available? Also, please could you let me know how to replicate the issue

[vvijayalakshmi21]

I have set up my windows machine. I need some clarifications about the issue.

1. What is the way to replicate the issue?
2. Is it that the icons are currently working as expected for Bluegenes or am I required to make changes for Bluegenes?
3. How do I get started? I see a lot of files and I do not know the list of files that need changing.
   Request you to help me with these

[heralden]

Sorry for the delayed response; we have been swamped by communications from Outreachy applicants.

Follow the README to run this project. You will need node, npm, leiningen and Java (eg. openjdk).
https://github.com/intermine/im-tables-3#building

1. I believe you can replicate the font breaking by changing the font URL in https://github.com/intermine/im-tables-3/blob/dev/resources/public/index.html#L7 to something invalid.
2. This project is used by Bluegenes, and you'll need to make changes in this project im-tables-3.
3. This project is written in ClojureScript, but you might be able to figure this out by referencing the files Yo linked above. Skim through this tutorial to understand how Hiccup compiles to HTML so you can map your html knowledge to this task.

At the top of https://github.com/intermine/bluegenes/blob/dev/src/cljs/bluegenes/components/icons.cljs you will find instructions on how to attain similar icons from Icomoon to replace the ones imported with fontawesome. Then create a similar icons.cljs file in this repo, with the svg converted to hiccup, and reference it at the top level like done in https://github.com/intermine/bluegenes/blob/dev/src/cljs/bluegenes/views.cljs#L70. Lastly, replace all uses of fontawesome in im-tables-3 to use the svg instead, like so [:svg.icon.icon-search [:use {:xlinkHref "#icon-search"}]] (also documented in the first link in this paragraph).

It is a bit of a difficult and involved task, but you are welcome to tackle it if you wish!

[vvijayalakshmi21]

Thanks for the response. I can now understand the changes needed. I would like to know if I need to get the equivalent of all the icons present in font-awesome.css file? And when you say this project is used by Bluegenes, does that mean these icons are used in Bluegenes project and not in im-tables? Kindly confirm

[heralden]

I would like to know if I need to get the equivalent of all the icons present in font-awesome.css file?

You only need to add Icomoon equivalents of the icons that are currently used. font-awesome icons are used like [:i.fa.fa-filter] (in HTML this becomes <i class="fa fa-filter"></i>), so you'll need to scan the codebase for these uses and replace them with Icomoon equivalents.

And when you say this project is used by Bluegenes, does that mean these icons are used in Bluegenes project and not in im-tables?

These icons are used in im-tables-3 (this project), which is used by Bluegenes.