![\"\"](\"https:\/\/dev-train-well.pantheonsite.io\/wp-content\/uploads\/1650333687978-900x300.jpeg\")
<\/figure>\n\n\n\nAs illustrated below, select code view <\/strong>(1) and then added a span<\/strong> tag (2) with class ‘flex-icon’, ‘fa-globe’ and ‘ft-state-success’.<\/p>\n\n\n\n <span class=”<\/em>flex-icon fa-globe ft-state-success<\/em><\/strong>” style=”font-size: 2.5em;”><\/span><\/em><\/p>\n\n\n\n You can apply additional classes and a style tag as illustrated above… <\/p>\n\n\n\n I first published this post at https:\/\/www.linkedin.com\/pulse\/icons-totara-lms-vijay-rudraraju<\/a> 1. Choosing an icon<\/strong><\/p>\n\n\n\n Totara included only some of the font awesome icons https:\/\/fontawesome.com\/search?m=free<\/a><\/p>\n\n\n\n The code\u2026<\/p>\n\n\n\n <span class=”flex-icon <\/em>fa-check-square-o<\/em><\/strong>“><\/span><\/em><\/p>\n\n\n\n Will output<\/p>\n\n\n\n From fontawesome site or on your site, simply swap the icon name to include another icon.<\/p>\n\n\n\n It’s easy to find an icon by performing a search on https:\/\/fontawesome.com\/search?m=free<\/a><\/p>\n\n\n\n Click on the icon, and copy the fa-class-name<\/strong><\/p>\n\n\n\n <i class=”fa-solid fa-calendar-check”><\/i><\/em><\/p>\n\n\n\n In Totara LMS, go to \/elementlibrary\/flex_icons.php to see the full list of icons.<\/p>\n\n\n\n Sizing icons using classes<\/strong><\/p>\n\n\n\n To have a bigger font simply add an additional class of ft-size-x<\/em><\/strong>.<\/p>\n\n\n\n The below code will create an 32px icon.<\/p>\n\n\n\n <span class=”flex-icon fa-check-square-o <\/em>ft-size-600<\/em><\/strong>“><\/span><\/em><\/p>\n\n\n\n Here are some size classes I found in Totara LMS:<\/p>\n\n\n\n Sizing icons using style tag<\/strong><\/p>\n\n\n\n To have a bigger font simply add a style tag with some css to scale it larger.<\/p>\n\n\n\n The below code will create an 32px icon.<\/p>\n\n\n\n <span class=”flex-icon fa-check-square-o” <\/em>style=”font-size:32px”<\/em><\/strong>><\/span><\/em><\/p>\n\n\n\n You can also use em’s to size your icons relative to the parent text. The below code will create an icon 5 times the default font size (16 * 5). Learn more about Relative sizing with EM units<\/a>.<\/p>\n\n\n\n Sizing Icons using em based classes<\/strong><\/p>\n\n\n\n You can also use em’s to size your icons relative to the parent text. The below code will create an icon 5 times the default font size (16 * 5). Learn more about Relative sizing with EM units<\/a>.<\/p>\n\n\n\n <span class=”flex-icon fa-check-square-o <\/em>size-5<\/em><\/strong>“><\/span><\/em><\/p>\n\n\n\n Note:<\/strong> To enable em based icon sizing, I add my own CSS classes to the LMS via \/admin\/settings.php?section=additionalhtml<\/em> or load CSS for the course via HTML block<\/a>.<\/p>\n\n\n\n To modify the colour, add additional classes e.g. ft-state-success<\/em><\/strong> will produce default success colour set in the LMS.<\/p>\n\n\n\n <span class=”flex-icon fa-check-square-o <\/em>ft-state-success<\/em><\/strong>“><\/span><\/em><\/p>\n\n\n\n Here are some colour classes I found in Totara LMS (v12) – these colours may be customised to suit your brand:<\/p>\n\n\n\n In addition to the default colour classes, you can add additional custom colour classes.<\/p>\n\n\n\n Note: <\/strong>To enable icon colours, I added my own CSS to the LMS via \/admin\/settings.php?section=additionalhtml or load CSS for the course via HTML block<\/a>.<\/p>\n\n\n\n Icon colours using style tag<\/strong><\/p>\n\n\n\n To have a colour not set up via the default colour classes (above), simply add a style tag with some css to colour the icon.<\/p>\n\n\n\n The below code will create a purple icon.<\/p>\n\n\n\n <span class=”flex-icon fa-check-square-o” <\/em>style=”color: #663399;”<\/em><\/strong>><\/span><\/em><\/p>\n\n\n\n For more information, go to CSS Colors Tutorial<\/a>.<\/p>\n\n\n\n Inherit parent colours<\/strong><\/p>\n\n\n\n You can also set the icons to inherit parent colours by default. i.e. the icon will inherit the colour of its parent paragraph, heading or link.<\/p>\n\n\n\n <span class=”flex-icon fa-check-square-o <\/em>vj-icon<\/em><\/strong>“><\/span><\/em><\/p>\n\n\n\n The class .vj-icon<\/strong> can be set up with the following styles to inherit parent colours automatically as well as align the icon vertically in the middle.<\/p>\n\n\n\n Note: <\/strong>To inherit icon colours, I added my own CSS to the LMS via \/admin\/settings.php?section=additionalhtml or load CSS for the course via HTML block<\/a>.<\/p>\n\n\n\n For more information:<\/strong> Refer to Flexible Icons API<\/a> (Totara v9 to v12) or SVG Icons<\/a> (v13 and above).<\/p>\n\n\n\n I hope you found this useful!<\/p>\n\n\n\n Please comment and share your own thoughts on this technique\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Use the SVG icons already available in Totara LMS rather than adding images. Add them as SPAN tag. Add classes to change icon size and colour. <\/p>\n","protected":false},"author":1,"featured_media":221,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[9],"_links":{"self":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts\/139"}],"collection":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":6,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts\/139\/revisions\/229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/media\/221"}],"wp:attachment":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/dev-train-well.pantheonsite.io\/wp-content\/uploads\/1650333633035-900x304.jpeg\")
<\/figure>\n\n\n\n
This technique works in Totara LMS v12.<\/p>\n\n\n\n![\"\"](\"https:\/\/dev-train-well.pantheonsite.io\/wp-content\/uploads\/1645763708767.png\")
<\/figure>\n\n\n\n2. Icon Size<\/strong><\/h3>\n\n\n\n
.ft-size-100 { font-size:14px }\n.ft-size-200 { font-size:16px }\n.ft-size-300 { font-size:20px }\n.ft-size-400 { font-size:24px }\n.ft-size-500 { font-size:28px }\n.ft-size-600 { font-size:32px }\n.ft-size-700 { font-size:38px }\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/dev-train-well.pantheonsite.io\/wp-content\/uploads\/1650333053017-900x290.jpeg\")
<\/figure>\n\n\n\n.size-2 { font-size: 2em; } \n.size-3 { font-size: 3em; } \n.size-4 { font-size: 4em; } \n.size-5 { font-size: 5em; }\n<\/pre>\n\n\n\n<\/h3>\n\n\n\n
3. Icon colour<\/h3>\n\n\n\n
.ft-state-default { color:#333 }\n.ft-state-success { color:#79ae3d }\n.ft-state-warning { color:#f09014 }\n.ft-state-danger { color:#cf232b }\n.ft-state-info { color:#499bc9 }\n.ft-state-disabled { color:#bbb }\n<\/pre>\n\n\n\n.vj-icon { \n fill: currentColor; \n vertical-align: middle; \n padding-bottom: .125em; \n display: inline-block; \n} <\/pre>\n\n\n\n