Adaptable Font Awesome

Adaptable Font Awesome

by Emma Richardson -
Number of replies: 10
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I am trying to get the font awesome icons to work in the marketing blocks with adaptable theme.  Tried adding the <i class="fa fa-camera-retro fa-2x"></i> style code to html and it just gets stripped out.  Installed font awesome filter and tried using the [fa-camera-retro] but it does not convert...

Average of ratings: -
In reply to Emma Richardson

Re: Adaptable Font Awesome

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi You need the code that starts with &

Camera is [&#xf030;]

More about this is the README for that filter.

Awesome Font Cheatsheet is HERE

PS:

I am assuming you have you set your site to allow HTML in headings and stuff?

In reply to Mary Evans

Re: Adaptable Font Awesome

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Finally got it - brain freeze time I guess!  Had not enabled the plugin - finally found that [fa-camera] format works.  Sorry for wasting your guys' time!

In reply to Mary Evans

Re: Adaptable Font Awesome

by Quentin Taylor -

Hi Mary,


I am a moodle beginner and I am having the same issue as emma what steps do I need to do to get the awesome fonts working in the marketing blocks?


Cheers,


Quentin.

In reply to Quentin Taylor

Re: Adaptable Font Awesome

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Open the Adaptable directory in your moodle site and read the README.txt to see how to add Font Awesome to your Adaptable theme.

In reply to Fernando Acedo

Re: Adaptable Font Awesome

by Quentin Taylor -

Hi Fernando,

I am adding this to a marketing Box. and I have added this code to the test marketing box I am trying.


<div style="text-align:center; background: #e6e6e6; height: 240px; padding: 7px;">
   <i class="fa fa-paint-brush fa-5x" style="color: #009688;"></i>
   <h3>Title </h3>
   <div style="text-align:center;">Add your text here.</div>
</div>


but when I save it the line:

<i class="fa fa-paint-brush fa-5x" style="color: #009688;"></i>

is then Stripped from the Code.

So not sure what is happening?


Thanks in Advance.



In reply to Quentin Taylor

Re: Adaptable Font Awesome

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I did discover that it would not work with TinyMCE but only with Atto.

In reply to Emma Richardson

Re: Adaptable Font Awesome

by Usman Asar -
Picture of Plugin developers Picture of Testers

Emma, Just for the sake of test, try loading FontAwesome from CDN giving reference to FA-CDN in head and see if it still breaks. Use any of the codes mentioned in Adaptable README.TXT (Like Mary mentioned)  and last time I did it was working well.