Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > Icon Font Unicode Issues


Posted by: Slip Jan 11 2018, 10:38 PM
Hi guys,
I've seen a fair amount of posts about this issue, and those that have been resolved have been done so in ways that I either couldn't replicate, or didn't work for me.

I'm currently working on a skin and am using FontAwesome and Iconmonstr for custom icons that can be targeted with CSS. This has worked fine, until I wanted to use them as unicode characters in after/before elements.

For reference (since it seemed in older threads people here might be unfamiliar with these fonts) these are fonts that import an icon set:
http://fontawesome.io/icons/
https://iconmonstr.com/iconicfont/
With both of these, their icons can be called in CSS using a unicode, like so:
CODE

.example:after {
    display: inline-block;
    position: relative;
    font-family: FontAwesome;
    content: "\f15c";
}

However, when I do this on Jcink, they render only as the actual text of the unicode and do not load the icon. I haven't been able to find any way to get them to render properly. When I original developed the code offsite, they worked fine, and when copy/pasting the code from the forum to another site, they popped right up.

user posted image

At the moment both fonts are linked as stylesheets in the forum's <head></head>. I've also tried importing them via a JS file (FontAwesome now issues its links in this manner), and @importing them directly into the board CSS, all to no avail. At this point I'm sure it's some silly quick fix I'm overlooking.

The board in question is here: http://secondmoon.jcink.net/ (The skin isn't close to complete so sorry for the ugliness)

Any help you guys can offer would be appreciated!

Posted by: owl Jan 12 2018, 02:16 AM
So, I might have misunderstood this but I believe the issue is that "\" won't work in the CSS for some reason, so if I were you i'd try taking your example, and wrapping it in style tags and try it in the board wrappers. Hopefully I'm not sending you on a goose chase by misremembering, but it's worth a shot.

Posted by: John Jan 12 2018, 12:36 PM
Backslash unfortunately \ won't work in the css or wrappers, it is a stripped character

The way to make this work is to create a css file and call it fontawesome.css or similar, and upload it to the filemanager. So you would put:

CODE
.example:after {
   display: inline-block;
   position: relative;
   font-family: FontAwesome;
   content: "\f15c";
}


in fontawesome.css, and upload it directly. It will not remove the \ during the upload.

Then link it into the board wrappers like this:

<link rel="stylesheet" type="text/css" href="full link to css file from filemanager">

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)