Integrate Icon Fonts (FontAwesome)

Put your questions here on how to do things in ProtoShare.
goosegrease
Posts: 6
Joined: Fri Jul 17, 2009 12:09 pm

Integrate Icon Fonts (FontAwesome)

Postby goosegrease » Tue Jan 20, 2015 10:28 am

I would like to include icon font elements in my design, and I am having no success. In this instance, I'm trying to use Font Awesome. I have included an @import link to the Font Awesome CSS in my prototype's main style sheet. The Font Awsome CSS and font files on a server that we manage:

Code: Select all

@import url("http://url-redacted/font-awesome-4.2.0/css/font-awesome.min.css");


Within my design, I have inserted some custom HTML into a rich text element:

Code: Select all

<p><em class="fa fa-dashboard">&nbsp;</em></p>


When I look at the page in review mode, the icon font does not display properly. It doesn't appear as if the font is loading. The icon font displays correctly in tests done outside Protoshare, using the same @import CSS and the same HTML. Any insight?

Nick Jennings
Posts: 165
Joined: Mon May 14, 2012 12:06 pm

Re: Integrate Icon Fonts (FontAwesome)

Postby Nick Jennings » Tue Jan 20, 2015 2:10 pm

Hello,

It looks like there might be a few issues that are preventing this to work. The first is that there seems to be an error attempting to access the stylesheet on a test account:

Code: Select all

Font from origin 'http://url-redacted' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://nick9.protoshare.com' is therefore not allowed access.


This prevents ProtoShare from being able to access the CSS information. You can upload stylesheets directly to your project's Library tab in the assets folder and reference it from there to avoid any blocks. This may still not work depending on which fonts or other resources are still behind the block.

We were successfully able to use fonts from FontAwesome using the stylesheet they provided: http://maxcdn.bootstrapcdn.com/font-awe ... me.min.css. You may want to try using that instead if you are unable to upload the stylesheets and fonts directly to ProtoShare.


Return to “How Do I...”

Who is online

Users browsing this forum: No registered users and 1 guest

cron