UTF8 icons lost in custom CSS

Resolved fghjh7866754653423
(@fghjh7866754653423)

9 years, 9 months ago
Every time I save a custom css rule in the TablePress settings, it breaks the UTF8 arrow icons, even though I am very careful never to include an actual rule which contains that data.

It is enough that I try and modify a rule that has a UTF8 symbol, even if I paste it in to custom css and exclude every facet of that rule except, for instance, ‘font-size’.

For example:
```
.paging_simple .paginate_button.next::after, .paging_simple .paginate_button.previous::before {
    font-family: proxima-nova,arial,sans-serif !important;
    font-size: 16px !important;
}
```
The original version of this rule has a UTF8 arrow icon, but the above custom revision for it doesn’t include that icon, but pertains to other parts of the rule. It still breaks the icon!

Viewing 11 replies - 1 through 11 (of 11 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 9 months ago

Hi,

thanks for your question, and sorry for the trouble.

I’m not really sure what you are trying to achieve here.
The problem is not really UTF-8, but more the fact that you are changing the font family. The arrows for the pagination are part of a special icon font that comes with TablePress. When you now change that font for the arrows, they will not show, unless the new font also has such arrows at the same “font position”.

So, can you maybe explain what you are trying to do here, so that I can maybe suggest a solution?

Regards,
Tobias

Thread Starter fghjh7866754653423
(@fghjh7866754653423)

9 years, 9 months ago

Thank you for your answer.

I am trying to integrate the appearance of TablePress into the site’s appearance, and it is a little unfortunate that TP has hard-coded a font embed in this way by default. Effectively this seems to mean that customers cannot escape the TablePress font choice without destroying the navigation icons.
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 9 months ago
Hi,

no, you can change those arrow icons easily. You will simply have to set a font that has arrow icons as well.
If that new font has them in a different “font position”, you will simply have to set that with extra CSS, like
```
.paging_simple .paginate_button.next:after {
	content: "\f054";
}
```
and the correct value for content:.

Regards,
Tobias
Thread Starter fghjh7866754653423
(@fghjh7866754653423)

9 years, 9 months ago

So in the case of Adobe’s Proxima Nova, how could I find out the equivalent icon code? Browsing the local install of the font, the codes do not correspond with the format you cite.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 9 months ago

Hi,

good question… Unfortunately, I’m not familiar with such font details. You could also try copy/pasting the actual character into the content: value, instead of using the escaped value.

Regards,
Tobias

Thread Starter fghjh7866754653423
(@fghjh7866754653423)

9 years, 9 months ago

Thanks. I think this would be worth some future documentation, since it is important for sites to be able to integrate plugins properly into their theme styles. Might also be worth making the font embed optional.

But I appreciate the quick replies.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 9 months ago

Hi,

making the font embed optional is not really a choice, unfortately, as the majority of sites does not use a font that has arrow icons.
Also, overriding (if really necessary) is rather straight-forward with CSS.

Regards,
Tobias

Thread Starter fghjh7866754653423
(@fghjh7866754653423)

9 years, 9 months ago

Fine – so for the benefit of other customers who would like to switch fonts – how do we find the right code for the fonts we use in our site themes? You have mentioned a code in one of your replies (‘\f054’). How did you find that code for the font?

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 9 months ago

Hi,

to be honest, I don’t know 🙁 The TablePress icons are from Font Awesome, and there I found these codes in their CSS, at https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L1138

You shouldn’t need the actual codes though. If you copy/paste the actual characters, this should also work. They might look wrong/different in the CSS then, but once applied with the actual font, they should show the desired character.

(And just to be sure in your example: Are you loading Proxima Nova as a web font, so that it’s available to all site visitors?)

Regards,
Tobias

Thread Starter fghjh7866754653423
(@fghjh7866754653423)

9 years, 9 months ago

Thanks – I will try it later.

Yes, Proxima-nova is guaranteed to be available to site viewers, it is loaded as a web-font for the entire theme.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 9 months ago

Hi,

ok. Yes, then it should not be a problem to show their arrow icons using this method.

Regards,
Tobias

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘UTF8 icons lost in custom CSS’ is closed to new replies.

Tags