Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replace easily-breakable fontawesome icons with inline svg instead. #24

Open
yochannah opened this issue Jun 13, 2017 · 9 comments
Open
Assignees

Comments

@yochannah
Copy link
Member

yochannah commented Jun 13, 2017

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

Example:

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

@yochannah
Copy link
Member Author

The icon fonts are breaking.

@yochannah yochannah added the bug label Nov 30, 2017
@yochannah
Copy link
Member Author

@yochannah yochannah changed the title icons replace easily-breakable fontawesome icons with inline svg instead. Nov 1, 2018
@vvijayalakshmi21
Copy link

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

@heralden
Copy link
Member

heralden commented Mar 6, 2020

Glad to hear! I have assigned you the issue.

@vvijayalakshmi21
Copy link

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
Copy link

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
Copy link
Member

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
Copy link

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants