using a theme with fontawesome installed if I include an icon in the HTML for TinyMCE the icon shows up in the text editor, but when viewing on the actual page the entire 'i' element is not output.
Has anyone else run into this, or has a solution?
You should probably have something inside the i-tags - for example instead of
<i class="icon-sun"></i>
try
<i class="icon-sun"> </i>
I ran into a similar issue where it was turning i tags into em tags (to be more semantic). Is that what's happening here?
Though thinking about it, it only happened on paste I think.
Though thinking about it, it only happened on paste I think.
TinyMCE tends to strip most "empty tags" - there are a couple of exceptions like
<div></div>
<p></p>
do not get stripped but tags like
<span></span>
<a href="#"></a>
<em></em>
<code></code>
<i></i> ...
vanish immediately from source. I'm not sure if the reason for stripping is in validation code (valid_elements) or somewhere else but it is easy to add for example that non-breaking space to such elements.
I ran into similar issue for the first time when we tried to create "empty img tags" with certain class as a placeholder for different math images/graphs etc.
It might be easy to create also a filter (and editor plugin) for this kind of icons so that code like /delimiter/sun/delimiter/ could be converted to <i class="icon-sun"></i> in content
Oh, an icon filter. That's a good idea.
That HAS to be done.
And so..here is the link to a beta that does just that.
https://github.com/moodleman/moodle-filter_fontawesome
just install this as a filter in Moodle. To embed icons enywhere you have a text editor just use square brackets around the stand icon name.
i.e. [icon-camera-retro]
this filter works as is but I am still trying to figure out how I can add a variable to it so you can specify a size as using the tinymce size styling does not seem to work.
Julian
Nice. For large icons you could look for the extra classes on this page:
http://fortawesome.github.io/Font-Awesome/examples/
So examples would be:
[icon-camera-retro icon-large]
[icon-camera-retro icon-2x]
[icon-camera-retro icon-3x]
[icon-camera-retro icon-4x]
The icon-fixed-width one is probably very useful too, and support for rotating and spinning would be a fun demo.
Because http://fortawesome.github.io/Font-Awesome/examples/ has lots of variations it might be easiest to allow any input and just replace delimiters with i tags - I am not sure if [...] is the best option but attached a zip package with a tiny modification that allows code like
[icon-spinner icon-spin icon-4x]
and outputs it like
<i class="icon-spinner icon-spin icon-4x"></i>
I changed the search row to
$search = "(\[(.*?)\])is";
and callback to
$embed = '<i class=".$matches[1]."></i>';
What is that code for load_global_config() doing? It was getting config of emoticons filter ... is it necessary at all?
For those "complex" examples you can use also code like
<span class="icon-stack icon-4x"> [icon-camera] [icon-ban-circle icon-stack-base]</span>
It might be nice to be able to select delimiters in settings of filter - we use often square brackets for mathematical notations in latex and if they are rendered with MathJax (javascript) filter takes square brackets always before javascript.
Perhaps the match should be tightened just slightly to prevent it eating unexpected things. Perhaps it should require the classes to start with "icon-"?
$search = "(\[(icon-.*?)\])is";
Getting better all the time... yes, it should.
The only requirement then is that first class must start with icon- and not for example with "pull-left".
Hi David.
yes, I really like this string. Provides a specific starting to call to start the filter but allows for a variety of options to be added. I have updated the filter in Github now.
Unless anyone has any really issues with the current form I plan to release it in the plugins DB next week.
Here however is my "challenging thought for the week" (music blares)
So a user loves the idea of font awesome icons but does not have a theme that includes it. Could we load FontAwesome from the CDN with a filter? Of course I don't want to pull in the CDN every tie an icon is called. Just once per page where needed. Any ideas?
Julian
This StackOverflow answer suggests that the font is only loaded once used, so linking when not used should be okay:
http://stackoverflow.com/questions/13249773/when-do-web-fonts-load-and-can-you-pre-load-them
edit: or maybe IE will, boo hiss!
http://stackoverflow.com/questions/13249773/when-do-web-fonts-load-and-can-you-pre-load-them
edit: or maybe IE will, boo hiss!
@Danny,
Have you tried using the HTML (unicode) from the cheatsheet instead? For example:
<span style="font-family: FontAwesome;" ></span>
Just a thought.
Further to my last comment. It does work using Unicode
I used...
<span style="font-family: FontAwesome; font-size: 200%;" ></span>
Sorry Mary,
but frankly that sounds terrible.
but it is a workaround which you can use while using an outdated text editor.
...outdated text editor
Talking about TinyMCE 4 it's not a question about version of editor - TinyMCE 4 strips empty tags just as well as TinyMCE 3, actually even more.
If you test on your site with Essential theme and tinymce 3 the following tags
1) [icon-twitter-sign]
2) <i class="icon-twitter-sign"> </i>
3) <span class="icon-twitter-sign"></span>
4) <span style="font-family: FontAwesome;" ></span>
5) <i class="icon-twitter-sign"></i>
1) is rendered with Julian's filter
2) is rendered ok
3) is rendered ok (TinyMCE 3 does not strip this)
4) is rendered ok
5) TinyMCE 3 strips empty tag
If you test the same on http://www.tinymce.com/tryit/basic.php (TinyMCE4)
1) would work
2) TinyMCE changes i tags to em tags but <em class="icon-twitter-sign"> </em> still works ! (Tested)
3) TinyMCE 4 strips empty span tags
4) would work
5) TinyMCE 4 strips empty i tags
Summa summarum Mary's workaround is ok, adding non-breaking space to tags like i, span, em,... makes them "safe" for any version of tinymce so it does not matter if you use <i class="icon-twitter-sign"> </i> or <span class="icon-twitter-sign"> </span> or <em class="icon-twitter-sign"> </em>
<i class="icon-twitter-sign"> </i> is simply the sortest workaround for TinyMCE 4 - and if we use a filter we need to use only classes and delimiters.
See also http://www.tinymce.com/presentation/index.html#/13
TinyMCE 4 is still in beta for a while, we are working on updating the documentation and fixing issues as they arise.
If Petr would say tomorrow that all themes of moodle 2.7 are going to use different layout model, different file structure, all the theme code needs to be rewritten... it would be close to situation where Stuart is saying that a few rows of code is enough to "write" an "editor" - it isn't. Editor without necessary plugins is not an editor - it's just as good as plain textarea, a tool that is not validating input properly is not a good editor and the cleanup that TinyMCE is doing is just based on the validation rules in it - that can in some cases prevent a lot of rubbish going to the HTML code...
Doesn't seem liek this got added to the DB yet - any chance of that happening soon? Since 2.5 I've been trying to move away from git installed plugins to auth'd plugins from the DB to use Moodle's auto-updater.
In short I got busy and forgot.
It has been added and is now awaiting approval.
I have also put some detailed documentation on icon usage as well as how to setup the CDN through Moodle settings in a MoodleDoc. Please feel free to add to it if you wish.
Julian
Awesome thread. I'm installing the filter from this link: https://github.com/moodleman/moodle-filter_fontawesome/archive/FontAwesomeFilter_1.0.zip
Preparing myself for some Awesomeness.
Crikey! I am stoked.
Julian, you are absolutely bril!!
Thanks Frankie. Glad you like it. I just love that this all happened from a random comment in a forum post.
I have written a more detailed forum post on it now here: http://moodleman.net/articles/using-fontawesome-moodle/
And have set up a demo course here: http://features.demo.moodle.com.au/course/view.php?id=35
Hi Julian
To
1. revel in the wonders of Font Awesome,
2. to celebrate installing the Font Awesome filter on my Moodle site,
3. and to celebrate your past, current and future achievements of the Essential theme,
I've decided to do this!
I've created two photomosaics of your images using the Font Awesome icons. This took me almost 30% of a whole day's work. I had to figure out how to automatically convert the Font Awesome icons into PNG files using Python (the toughest part!). Then I had to batch convert 378 PNG files into JPG format (only after a tough web search). Finally, I used AndreaMosaic to create the final mosaics using a combination of 2,000 repeating JPG images of the icons (the easiest part!). Enjoy.
One more...for fun!
Best viewed from a distance of 3 feet away from the monitor.
Regards
Frankie Kam
P.S., if it helps anyone, I've also created a zip file that has the PNG and JPG images of all 378 Font Awesome icons. I doubt if you can find the icons in image format anywhere on the Internet. Of course, Font Awesome, as a graphical font by itself has an advantage over the image format. Anyway for what it's worth, here's the link:
https://dl.dropboxusercontent.com/u/17797520/moodle/Font_Awesome_In_JPG_and_PNG_formats.zip
Many thanks to David Gandy for this font!
Hello!
I follow your instructions but it does not work.
First I add the Link (look at the screenshot)
Then I install the filter.
But if i write for example
[icon-beaker icon-2x]
nothing happens. I use Essential 2.6 (2013100800) and Moodle 2.5.2+ (Build: 20131011)
What can I do?
Christian
I found my mistake. I have forgotten do enable the filter.
Christian
Yes, I like this approach. It strikes me as similar to the wordpress shortcodes. Which might be a great approach in moodle too to have something like
[icon foo bar
[math foo foo
[ruby foo foo
etc... for text filters that need to be converted.
Julian, this is great! Now for the next discussion (version 1.1?):
Should the full font-awesome stack be moved into this text filter and then any themes that want to use it (say to replace nav-tree icons) mark this plugin as a dependency?
The reason being that if the theme has font-awesome core assets, not the text-filter, then switching themes will "break" this text filter. e.g. this filter needs a font-awesome enabled theme as a dependency. Just seems backwards, or rather, needlessly divided.
either way I'll be installing this ASAP
Interesting idea. Perhaps both the theme and the filter should include the CSS, but allow you to disable one of them, if you're using them together? (or do so automatically?)
lol - i love visiting the themes forum, its like the wildwest where any of the interesting policies regarding moodle made by core are just tost aside in favour of sanity ;)
you guys rule.
Awesome!
Giddyup Moodlers!
