How to import a new font/icon in OpenMRS Ref App?

Development
,
1

Hi!

I notice that in Core Apps module, the styling is handled with .scss files.

Though in a standard CSS module I can add a font by just adding the eot, ttf, woff and svg files such as:

webapp
|--resources
|  |--fonts
|    |--fontawesome.eot
|    |--fontawesome.svg
|    |--fontawesome.ttf
|    |--fontawesome.woff
|  |--styles
|    |--font.css

And in the font.css file:

@font-face {
  font-family: 'fontawesome';
  src:  url('../fonts/fontawesome.eot?dv54b9');
  src:  url('../fonts/fontawesome.eot?dv54b9#iefix') format('embedded-opentype'),
    url('../fonts/fontawesome.ttf?dv54b9') format('truetype'),
    url('../fonts/fontawesome.woff?dv54b9') format('woff'),
    url('../fonts/fontawesome.svg?dv54b9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-sticky-note-o:before {
  font-family: 'fontawesome' !important;
  content: "\e900";
}
.icon-sticky-note:before {
  font-family: 'fontawesome' !important;
  content: "\e901";
}

I am not able to make this work in the Sass directory structure.

(Q) How to import a font in Core Apps module?

2

Are you looking for something like this?

3

I think the idea is to you add it to icomoon at

I’m not sure where/if this is documented. (Or, if it’s an implementation specific icon it would be a new font file.)

-Darius (by phone)

4

Thank you for pointing me to the right examples.

I have had to add one level up to the font files url to make it loaded

openmrs-module-coreapps/omod/src/main/compass/sass/stickynote/stickyNoteIcon.scss :

@font-face {
  font-family: 'fontawesome-stickyNote';
  src:  url('../../fonts/fontawesome-stickyNote.eot');
  src:  url('../../fonts/fontawesome-stickyNote.eot#iefix')
  [...]

(Notice the path “…/…/fonts/”)

Font files are located here:

omod/src/main/webapp/resources/fonts/
├── fontawesome-stickyNote.eot
├── ...

@djazayeri, is openmrs-owa-uicommons module going to be added to the Ref App 2.7? Do I need to ship my changes into this module?

5

Is this actually a single icon from font-awesome?

I assumed it was already included in RefApp 2.6 via the new dashboard widgets, but I guess @raff or @ssmusoke can confirm.

6

Yes it is. But looks like it is not available in the font-awesome package used by Ref App. The font-awesome name is fa-sticky-note