This filter is only available for Moodle 2.5 and above. You can combine all of them in any combination to get lots of new possibilities. Or spinning icons for loading and refreshing content. Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. e.g.:Īll the settings above can be mixed and matched. If it is "pulled" to the left text will wrap to the right. You can "pull" the icon to the left or right. You can also flip an icon horizontally or vertically. If you wish to rotate the icon you can specify how many degrees clockwise. If you wish to make the icon larger you can use a multiplier. If you have typed in the icon name correctly you will see the icon appear once you have hit save. Once you have found the icon you are after you just have to surround it with a set of square brackets. To browse the full list of over 360 icons please visit this link. The hardest part is finding the icon you wish to use. Once done you are now ready to use the FontAwesome filter.Īdding an icon to anywhere in your course that you wish is now a simple process. This will then load the FontAwesome as part of every page load. Once you are in the "Additional HTML" settings we need to add the following line to the "Within HEAD" section. You can find this located under the "Appearance" menu. To add the CDN to your Moodle you need to add the following line to your "Additional HTML" settings in Site Administration. This line will connect to a dedicated CDN to reliably load FontAwesome into your moodle site. Ever wonder what camera might look like in the mix Well, youre in luck Weve cooked up some examples of how you could use the camera icon in your. You can pull FontAwesome into your site using any theme by adding a single line to your Admin settings. You can manage size of icon(fa fa camera retro) by using font-size css style. Font Awesome camera retro Icon can be resized as per your need. If this library is added just add the HTML css class fa fa-camera-retro to any element to add the icon. First make sure you have added Font Awesome Icon library. The goal of a CDN is to serve content to end-users with high availability and high performance. You can use this icon on the same way in your project. One such theme that already has FontAwesome contained within is the Essential Theme by Julian Ridden.Ī content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. To find out if they do just read the information found about them in the Modules and Plugins Database. Some Moodle themes are now coming with FontAwesome already enabled. You can get FontAwesome running one of two ways. You will need to first ensure your site has the FontAwesome font enabled before you can use this filter. The filter just facilitates adding them to content. This filter provides another mechanism to add FontAwesome icons that won't be stripped out by the editor.įontAwesom icon's will not work just by adding this filter to your Moodle. If using the recommended method provide by FontAwesome which involves creating custom classes you will find that the text editor strips these out automatically as unrecognised/bad code. Where this content code corresponds to the Unicode code of the character.The aim of this filter was to provide an easy and functional way for content creators to easily add FontAwesome icons anywhere in course content. What FontAwesome is doing is applying the FontAwesome font-family to the ::before pseudo element of any element that has a class that starts with “icon-“. Where fa-3x will make the icon 3 times bigger. You can always style differently your tag with style attributes, separate css or even with custom rules like: You can place Font Awesome icons just about anywhere. Oh my god, that’s it! You’re ready! How to use this font You could download its css and link it right in the, or the judo solution would be to hotlink like this: This is a good thing regarding User Experience because your users will already know what’s most probably hidden behind each of you icon indicators. In fact, if you think about it, most of the more common icons you are accustomed to see are pretty consistent, like: You can appreciate this better when you observe at the fact that vectors can be enlarged infinitely, whereas icons get pixelated:Īnd as you might have guessed, the repertoire for this font must be big (369 icons and growing) to suit all of your needs. Adding Font Awesome Icon HTML Camera retro(fa fa-camera-retro) in web project is very simple. That the latter one is a vector font, not an icon. What’s the difference between this: and: ?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |