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

Tags: #<Tag:0x007f50bbd96f08> #<Tag:0x007f50bbd96d50>

mksrom (Romain Buisson) 2017-05-30 10:03:52 UTC #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?

dkayiwa (Daniel Kayiwa) 2017-05-30 21:53:48 UTC #2

Are you looking for something like this?

github.com

openmrs/openmrs-module-ebolaexample/blob/beb8ff161a4cc51e185194eba17c8362dca0d8b6/omod/src/main/compass/sass/tablet-style/font-awesome.scss

/*!
 *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

This file has been truncated. show original

github.com

openmrs/openmrs-module-ebolaexample/blob/beb8ff161a4cc51e185194eba17c8362dca0d8b6/omod/src/main/compass/sass/tablet-style/icomoon.scss

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

.icon-vitals:before, .icon-vitals-2:before, .icon-provider:before, .icon-medicine:before, .icon-diagnosis:before, .icon-x-ray:before, .icon-archives:before, .icon-medical:before, .icon-register:before, .icon-check-in:before, .icon-medicine-2:before, .icon-record:before, .icon-baby:before, .icon-admission:before, .icon-tomo:before {
	font-family: 'icomoon';
}
.icon-vitals:before {
	content: "\e000";
}
.icon-vitals-2:before {
	content: "\e002";
}

This file has been truncated. show original

github.com

openmrs/openmrs-contrib-uicommons/blob/c7c88b6db96e07627ba10cae6f5add918c1cd654/src/scss/sass/fonts/_font-awesome.scss

/*!
 *  Font Awesome 3.0.2
 *  the iconic font designed for use with Twitter Bootstrap
 *  -------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation
 *  can be found at: http://fortawesome.github.com/Font-Awesome/
 *
 *  License
 *  -------------------------------------------------------
 *  - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
 *
 *  Contact
 *  -------------------------------------------------------
 *  Email: dave@davegandy.com
 *  Twitter: http://twitter.com/fortaweso_me

This file has been truncated. show original

darius (Darius Jazayeri) 2017-05-31 00:05:08 UTC #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)

mksrom (Romain Buisson) 2017-06-01 12:49:26 UTC #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?

darius (Darius Jazayeri) 2017-06-01 21:27:25 UTC #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.

mksrom (Romain Buisson) 2017-06-02 06:33:40 UTC #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