Fontawesome-enabled Clean Theme Instructions

Fontawesome-enabled Clean Theme Instructions

by Malcolm Hay -
Number of replies: 2

Hi all,

Like many, I have used icons in my courses but now, developing courses that others are going to maintain, I have to ensure simplicity and that often means not including things that require the teacher to use anything other than the WYSIWYG editor.

We use  the amazing theme by Gareth Barnard, Essential site wide. However, there are courses that require an individual look and feel. That is easily done but we also wanted to have the convenience of using the Fontawesome Filter. For those that don't know it, this filter enables the teacher to add icons to their pages by putting the Fontawesome code inside square brackets e.g. [fa-home fa-2x pull-left]. This only works for Fontawesome-enabled themes such as Essential or Shoelace. You can, of course, still use <i>-tags.

After gleaning information from a variety of sources I would like to share how to turn the standard "Clean" theme into a Fontawesome-enabled theme. I am still relatively new to Moodle so I would also appreciate it if someone tells me  if I have made any mistakes but so far it seems to be working and also inherits to any child themes created. I assume that the steps would be similar for "More" but that will have to wait until I have some spare time.

#######################################################

1. Download Fontawesome from http://fontawesome.io/ and unzip.

2. Add a  new folder "fonts" to the "clean" directory and add the files fontawesome-webfont.svg, fontawesome-webfont.ttf, FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.woff and fontawesome-webfont.woff2.

2. Copy font-awesome.min.css to the "style" folder.

3. In the file "config.php" add fontawesome.min to the sheets e.g. $THEME->sheets = array('custom', 'font-awesome.min');

4. In the "custom.css file, add the following lines:

@font-face { 

font-family: 'FontAwesome'; 

src: url([[font:theme|fontawesome-webfont.eot]]); 

src: url([[font:theme|fontawesome-webfont.eot]]) format('embedded-opentype'), 

     url([[font:theme|fontawesome-webfont.woff]]) format('woff'),

     url([[font:theme|fontawesome-webfont.woff2]]) format('woff'),  

     url([[font:theme|fontawesome-webfont.ttf]]) format('truetype'), 

     url([[font:theme|fontawesome-webfont.svg]]) format('svg'); font-weight: normal; font-style: normal; 

} 

#######################################################

That's pretty much it. I hope that this is helpful for someone out there.

Cheers,

Malcolm

Average of ratings: Useful (1)
In reply to Malcolm Hay

Re: Fontawesome-enabled Clean Theme Instructions

by Stuart Mealor -

That's interesting - thanks for sharing Malcolm smile

I wonder what advantages/disadvantages this has over using the FontAwesome Filter (https://moodle.org/plugins/filter_fontawesome)

and adding the Additional HTML Heading settings:

 "link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">"

Maybe your method will produce faster rendering, and allow for greater flexibility ?
Average of ratings: -
In reply to Stuart Mealor

Re: Fontawesome-enabled Clean Theme Instructions

by Malcolm Hay -

Hi Stuart,

The Fontawesome filter does not provide the icons and only seems to work with so-called Fontawesome-enabled themes.

While the icons can be called up using the link to the stylesheet, the filter did not seem to recognise that they ere available - at least on our system. 

The themes that are in the list of themes that work with the filter all seem to have the icons embedded as fonts so I thought I would give it a try. Certainly, the icons do now seem to render with less lag than previously, although that might just be wishful thinking on my part.

Glad you liked it.

Malcolm

Average of ratings: -