{"id":5624,"date":"2017-03-08T16:06:01","date_gmt":"2017-03-08T16:06:01","guid":{"rendered":"http:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/?p=5624"},"modified":"2017-03-14T23:50:50","modified_gmt":"2017-03-14T23:50:50","slug":"adding-icons-to-web-page-in-weblearn","status":"publish","type":"post","link":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/2017\/03\/adding-icons-to-web-page-in-weblearn\/","title":{"rendered":"Adding ‘awesome’ icons to web page in WebLearn"},"content":{"rendered":"

\"\"As I’m sure you’ve noticed, most pages in WebLearn 11 use a new icon set: Font Awesome icons. You may well recognise these icons from other websites or phone ‘Apps’. Unlike the previous (‘Silk’) icons these are not images, they are, as the name would suggest, a font. This makes them scalable and colourable (if that’s a word).<\/p>\n

Font Awesome icons are open source and can be customised in many ways \u2014 size, colour, drop shadow, and anything that can be done with the power of CSS. They can even be made to spin around if that’s one of your hobbies.<\/p>\n

Using Font Awesome icons on your pages<\/h2>\n

To add a Font Awesome Icon to a WebLearn page, open the HTML editor and locate the Font Awesome ‘flag’ icon at the end of the middle row (when using WebLearn on a desktop machine).<\/p>\n

\"\"<\/p>\n

You can then select a suitable icon, either search by name or browse by using the scroll bars.<\/p>\n

\"\"<\/p>\n

Basic customisation can be effected whilst using the picker but you can use any CSS directives via the “Source” view of the HTML WYSIWYG editor.<\/p>\n

\"\"<\/p>\n

That’s all there is too it. Don’t go too crazy with the spinning though!<\/p>\n

Links<\/h2>\n