|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:
With both of these, their icons can be called in CSS using a unicode, like so:
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.
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:
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">