Canvas iPad app: How to get Instructure Icons and/or Fontawesome Icons to display

[jonlai]

I would like to create an html template for professors to use that works on desktop/laptop browser, mobile/tablet browser, and mobile/tablet canvas app (e.g. iPad app).

An html template can be created with inline styles that looks decent on the desktop and mobile/tablet internet browsers. I use https://instructure.github.io/instructure-icons/ and some inline css for the designs and visual imagery.

However, when I go to view the page on the iPad Canvas app, the Instructure icons fail to show. The same thing occurs when I use fontawesome icons as well. Things work fine in the browser, but fail to show on the iPad app.

Does anyone have experience with this issue and ways to bypass it or any other resolutions?

[gcollins1]

Perhaps this is your solution, from another community discussion:
https://community.canvaslms.com/t5/Admin-Group/Images-not-showing-in-iOS-mobile-app/m-p/64571#M1243
which links to this YouTube solution video:
https://www.youtube.com/watch?v=MlgqgsTxreI

[jonlai]

I can see images just fine with my iPad canvas app, it's the icon's that don't display that is the issue.

I've just attached a screenshot of a canvas page that displays in my iPad and my desktop browser. 

In the desktop browser, the image shows and the fontawesome icons display. In the iPad, only the image displays and the icons don't show. 

Any other ideas on getting the instructure icons or fontawesome icons to display?

Here is another photo of a course page in the iPad Canvas app. The Instructure icons don't display there either.

[rseilham]

@jonlai,

Unfortunately, I don't think this will work on mobile. My best guess is because the mobile app uses a very base CSS style sheet which generally doesn't include items like font-awesome. There is a way to add additional CSS to the theme editor for mobile but I have never been able to get this to work for anything more complicated than basic styling. If you have the skills and access, I'd suggest trying to adjust the mobile CSS to add these elements. Good luck!

[jonlai]

@rseilham

Font awesome icons don't display but also the inbuilt https://instructure.github.io/instructure-icons/ icons don't display either -- it was just a nice "brownie point" to later discover that font awesome icons could be called, I initially thought only instructure icons could be used.

I am using Canvas on multiple canvas installations at the campus I work at. I have admin access to the department professional development canvas instance and can upload javascript and css style sheets through the "Admin > Themes" section. However, I'm trying to make templates to be used on the general campus canvas instance. For that instance I do not have admin access to upload javascript or css style sheets -- meaning I'm just limited to using css inline styles (and using https://github.com/premailer/premailer to inline the styles).

Are there any other suggestions you have?