LOOK & LEARN | Using Font-Awesome in your Moodle pages.

LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Mary Evans -
Number of replies: 11
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Just testing:

It's quite easy to add Font Awesome icons if you need to.

Like this Bar Chart for instance. I used a <span></span> tag  and not the <i></i> tag that is normally used.
Also because it is a font you can style it too.
<span class="fa fa-bar-chart fa-2x" style="color: blue;"></span>
If you think this is useful please click the Rateing link associated with this post.

Thanks
Mary

PS: This will only work for Moodle 3.0+ versions that have the Font Awesome installed by default.




Average of ratings: Useful (17)
In reply to Mary Evans

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Samuli Karevaara -

Is there a way to add these visually, like emoticons? Some Atto plugin for example?

In reply to Samuli Karevaara

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

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

Not that I know of, but you could try Generico filter plugin.



In reply to Mary Evans

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

The Snippet tool for the Atto editor works great for quickly inserting stuff like this. In only a couple of minutes, I copied your example span above and used it to created a Snippet that inserts your bar chart and also gives the option of specifying the size and color. You get to see the results as soon as you click insert, while still in edit mode.


Average of ratings: Useful (4)
In reply to Mary Evans

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Daniell Goodin -

Mary, 

so glad it's you here giving these instructions smile 

+ we have AL around so I am sure we will sort out this little problem I am having. 

I am breaking down my bucket list from my long-winded thread in the General thread. 

Now settled on the 3.3.2 build and adaptable 1.5.1.. as per other thread I have spent the last 3-4 days testing stressing and working out what I can and can't do, while eliminating what it may or may not be the cause. 


So lets talk about Font Awesome... 

I have attached what I see in the 3rd party libs.  

I am using the code from Adaptable. Marketing blocks

in all reality, it should work but will  not.. 

And I have tried using both editors to make sure there is not code injection going on. 

It's not the theme as I have gone back to clean and it just is not playing nice.  

Is there somewhere in one of the main core sheets I should be looking?

What is giving me a headache is I am running EXCATLY the same setup on 3.2.2 and its working... sad


I think if we crack this then it may also solve why not to much of the Bootstrap 2.3.2 components code it not working. 



Attachment Font Awesome libs 2x.JPG
In reply to Daniell Goodin

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Decided to play hooky from development work on MooTyper keyboard layouts and came up with these two marketing block bundles for the Snippet tool for the Atto editor. Only had time to test in Moodle 3.1.8 and 3.3.2. Look the same except the balance-scale icon did not show up in Moodle 3.1.8. Others in place of it did work.

Hmmm. Moodle is only letting me attach one bundle so I am including the one that uses fa-icons. To make the text only one just leave out the line in the snippet that contains all the fa-xxxx stuff as well as the faicon and fasize entries in the defaults section.


In reply to AL Rachels

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Daniell Goodin -

AL, 

Thanks for that, looks great.

I have grabbed your Templates and dropped into Generico.

Needless to say, 3 out of the 4 testing servers I am running this on is looking great. 

Will come back to this as I think I might have had a bit of a light bulb moment on my bigger new site. Thanks smile

I will keep it all documented in my other thread as I am back to the drawing board with tests. 

Average of ratings: Useful (1)
In reply to Mary Evans

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Przemek Kaszubski -
Picture of Particularly helpful Moodlers Picture of Testers

Hello,

A simple newb question: Are there plans for a Moodle FA brand icon, maybe?

Can't see one here: https://fontawesome.com/icons?d=listing&s=brands

Regards,

Przemek 

In reply to Przemek Kaszubski

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Probably a question more for the FontAwesome developers than Moodle people smile

In reply to Przemek Kaszubski

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Usman Asar -
Picture of Plugin developers Picture of Testers
Julian already had put a request, a long time ago, lets see when they will include in list.
In reply to Usman Asar

Re: LOOK & LEARN | Using Font-Awesome in your Moodle pages.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

The more votes (one per person) the better: https://github.com/FortAwesome/Font-Awesome/issues/2167 and thumb up the original post https://github.com/FortAwesome/Font-Awesome/issues/2167#issue-21197807.

Average of ratings: Useful (1)