Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Icon Font Unicode Issues, FontAwesome strikes again
#
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!
PM
#
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.

signature
user posted image

Please do not use my site Discord / DM / PM me for support.
#
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">

signature
email: admin@jcink.com :: blog: John C.
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll