Icon Fonts and Moodle - will it be difficult?

Re: Icon Fonts and Moodle - will it be difficult?

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

OK...quickly as I am runign short on time today!!!

all font files go into this directory ->

essential/fonts

all css files go into this directory -> 

essential/style

add stylesheet to essential/config.php ->

$THEME->sheets[] = 'flaticon';

The only thing which you may not have done yet is follow the information in that tutorial I wrote, about the Moodle @font-face CSS mark-up that allows Moodle to establish the URL links to the fonts?

@font-face { /* where FontName and fontname represents the name of the font you want to add */
     font-family: 'Flaticon';
     src: url([[font:theme|flaticon.eot]]);
     src: url([[font:theme|flaticon.eot]]) format('embedded-opentype'),
          url([[font:theme|flaticon.woff]]) format('woff'),
          url([[font:theme|flaticon.ttf]]) format('truetype'),
          url([[font:theme|flaticon.svg]]) format('svg');
     font-weight: normal;
     font-style: normal;
   }

Then all you need is some extra CSS that styles Moodle using the class selectors like...

.block_navigation .header h2:before {
    content:"\f14e"; /* or whatever the code is for the font */
    color: #ddd;
    font-family: Flaticon;
}

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

Re: Icon Fonts and Moodle - will it be difficult?

by Carol Booth -

>The only thing which you may not have done yet is follow the information in that tutorial I wrote, about the Moodle @font-face CSS mark-up that >allows Moodle to establish the URL links to the fonts?

Is that tutorial in this post?

Average of ratings: -
In reply to Carol Booth

Re: Icon Fonts and Moodle - will it be difficult?

by Mike Nodding -

Hi, Did you ever get this working? I seem to be having similar trouble. 

Using latest Essential 3.1.0.2 Moodle 3.0.4

following instructions, I added fonts from icomoon to essential/fonts/

added css to essential/style/arts-template.css

added 

$THEME->sheets[] = 'bootstrap-pix';

$THEME->sheets[] = 'moodle-pix';

$THEME->sheets[] = 'essential-pix';

$THEME->sheets[] = 'essential-settings';

$THEME->sheets[] = 'fontawesome';

$THEME->sheets[] = 'arts-template';

to config.php

but i can't get the icon to appear - just shows a square. 

icon not showing

From inspector it looks as if the font and css are loaded ok, not sure if there needs to be something else done in the essential code to make it happen. the icons work locally ok and i have the same css involved. 

local:

icomoon working

inspector:


inspector screenshot

inspector screenshot

Average of ratings: -
In reply to Mike Nodding

Re: Icon Fonts and Moodle - will it be difficult?

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

To add Fonts to a theme you need to put the font files in the essential/fonts/ directory.

The in the css file you need the @font-face source urls

Unfortunately because Essential compresses tge CSS you can't see the method used in Moodle, which is very different than the normal way.

There was a Moodle doc called How to add custom fonts in a theme it may still be about somewhere, but I may have the title wrong?

Do a Google search should heals an answer?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Icon Fonts and Moodle - will it be difficult?

by Mike Nodding -

thanks Mary, yes i've seen that from up above and followed it, have worn Google out.

have

@font-face {

    font-family: 'icomoon';

        src: url(icomoon-webfont.woff2) format('woff2');

    font-weight: 400;

    font-style: normal;

}

in style/arts-template.css (have had all the other urls too but it made no diff - trying to narrow down what the issue is. All the fonts are in fonts/ and it looks like it's loading up from theme fonts.php but it kinda isn't. I just wondered with Essential if third party code/files had to be called somewhere for them to show.  

I may head to a cdn/Fort Awesome/icomoon delivery -  seems a lot easier. 



Average of ratings: -
In reply to Mike Nodding

Re: Icon Fonts and Moodle - will it be difficult?

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

Hi Mike,

Why are you using the M3.1 beta version of the theme on Moodle 3.0 please?

Essential's compression in M3.0 version will not make any difference as it is essentially the same as the 'all' cached pseudo-file generated by core when TDM is off.

The instructions How_to_add_custom_fonts_in_a_theme will work with the theme.

Also M3.1 has some 'display: none's in places so worth looking at all of the styles.

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Icon Fonts and Moodle - will it be difficult?

by Mike Nodding -

sorry, wrong version... just seeing if you're paying attention smile using latest for 3.0 

i think it has to do with mime types on the server (ubuntu 14) - can replicate when i stuck it on an old webserver here where it doesn't recognise them. My be a red herring. I'd checked permissions etc. Does work if i call the temp hosted css url from icomoon. Pretty sure i'm doing everything else right, so yes, i'd expect it to work from those instructions, just wondered if it was something with essential code I was missing. 

It's only a few icons so perhaps i'll just sort it so the fonts are hosted here somewhere static. 

Could you perhaps alter the theme font settings so people could upload extra icon fonts? fa is great for UI things and some extra iconography but i imagine a few people would like extra educational themed ones.

So, unless I can figure out why the fonts aren't recognised, i'd call the css via additional html, with the fonts/css hosted somewhere - seems to work ok - not sure if there's a big downside to this.

icons working

Average of ratings: -
In reply to Mike Nodding

Re: Icon Fonts and Moodle - will it be difficult?

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

Hi Mike,

Could be lack of browser support for woff2 on the old system?

Adding icon fonts is harder than normal fonts from a UI perspective and now has ARIA implications that need to be catered for in code on a per-font basis as each one is potentially different.  Thus a UI solution would be very complex, better and cheaper to have added to the theme as a on / off setting by a software engineer.

If its only a few icons then get the SVG version and use an image instead.

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Icon Fonts and Moodle - will it be difficult?

by Mike Nodding -

ok thanks. yeah, my example was with woff2 as i'd scaled it down one by one, but i'd tried with the regular font types with the same results. 

yeah, i was looking at svg, may well go down that road - was used to the font way and svging looked a bit fiddly and perhaps prone to older browser issues. It's a few now but that's how it always starts smile 

Didn't really want to spend that much time on it... but now i'm down the rabbit hole... 

Average of ratings: -
In reply to Mary Evans

Re: Icon Fonts and Moodle - will it be difficult?

by T K -

this is weird.. your reply and my reply to u has gone missing 

Average of ratings: -
In reply to T K

Re: Icon Fonts and Moodle - will it be difficult?

by T K -

Is this discussion board still active? my responses has gone missing and i am getting no solution to my moodle questions

Average of ratings: -
In reply to T K

Re: Icon Fonts and Moodle - will it be difficult?

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

Yes, the Themes forum is very active Karishma, including this thread.

Mary split your other questions from this thread and did post that she had done so - and I see you have posted in that thread today, so hopefully you have found the reponses you were given and we can continue the thread there smile

https://moodle.org/mod/forum/discuss.php?d=330819#p1332372

Average of ratings: -