Thanks Mary, just what I needed
Carol
Thanks Mary, just what I needed
Carol
Mary, thanks for your help. I have read https://docs.moodle.org/28/en/How_to_add_custom_fonts_in_a_theme and many 'how to install / use an icon font in your website' articles on the web but haven't achieved my aim yet. This is what I have done so far:
downloaded an icon font pack from flaticon.com at http://www.flaticon.com/packs/ (I chose 'education') and unzipped it. It contained
After reading the instructions for adding custom fonts to moodle and looking at the files in the essential theme, I placed the four font files (flaticon.eot, .svg, .ttf, .woff) in the theme's fonts folder (moodle/theme/essential/fonts/) and the .css file in the theme's styles folder (moodle/theme/essential/style/)
The instructions in flaticon.html say:
1Copy the "Fonts" files and CSS files to your website CSS folder.
(I believe this is what I have done above)
2Add the CSS link to your website source code on header.
<head>
...
<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
...
</head>
3Use the icon class on "display:inline" elements:
Use example: <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
I believe I've done step 1 but I'm not sure how to accomplish step 2
Where do links to stylesheets reside in moodle?
the 'creating a theme' docs tell me:
$THEME->sheets = array('excitement');
... and near the top of moodle/theme/essential/config.php I find the following:
$THEME->sheets[] = 'moodle-rtl'; $THEME->sheets[] = 'essential-pix'; $THEME->sheets[] = 'settings'; $THEME->sheets[] = 'fontawesome';
so logic suggests I would add a line like:
$THEME->sheets[] = 'flaticon';
I had a go at this on my testserver and used the html editor in my moodle to add the code:
Essential is a bootstrap theme and uses LESS https://docs.moodle.org/dev/LESS so should I be using this instead of making a stylesheet link?
I'll be very grateful for a pointer to the appropriate documentation or an explanation.
Thanks
Carol
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;
}
>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?
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.
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:
inspector:
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
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.
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
sorry, wrong version... just seeing if you're paying attention 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.
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
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
Didn't really want to spend that much time on it... but now i'm down the rabbit hole...
this is weird.. your reply and my reply to u has gone missing
Is this discussion board still active? my responses has gone missing and i am getting no solution to my moodle questions
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