Previous Message
Next Message

rendering of icon in Windows browsers

Sent by Karl DeSaulniers on 28 July 2016 05:05


Hi Sara,
I think you're meaning this? No it does not have to be a svg.

.menu li::after {
	font-family: 'athelas', serif;
	font-weight:bold;
	font-size: 16px;
	content: url('diamond.png');
}

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 27, 2016, at 10:21 PM, Sara Haradhvala [EMAIL-REMOVED]> wrote:
> 
> I think you’re right.  The problem is that I need to use a glyph from photoshop that isn’t
assigned a unicode value.  Is there any way to use this as text? Or does it have to be turned into
an svg image?
> 
> 
>> On Jul 27, 2016, at 7:15 PM, Philippe Wittenbergh [EMAIL-REMOVED]> wrote:
>> 
>> 
>>> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala [EMAIL-REMOVED]> wrote:
>>> 
>>> I set up this unicode in CSS
>>> 
>>> .menu li::after {
>>> 	content: “◆”;
>>> 	font-family: athelas, serif;
>>> 	font-weight:bold;
>>> 	font-size: 16px;
>>> }
>>> 
>>> My problem is that the diamond is much bigger in IE and somewhat bigger in FF on Windows. 
>> 
>> One guess [*], as I don’t have access to that font (athelas): it does **not** contain a glyph
for the character you want to display, and neither does the default serif font, then system fallback
occurs – that is: Firefox and IE (Edge also ?) fall back to the default system font that contains
that glyph. That happens to be bigger than the default one on OS X. And who knows what happens on
Android.
>> 
>> There is not much you can do about it… except specifying a (fallback) font that is available
cross platform (or via @font-face) that contains that glyph. For example:
>> 
>> font-family: 'athelas', 'arial unicode MS', sans-serif. // Roboto, the default on Android, has 
very similar metrics
>> 
>> [*] a quick test on fonts.com (the official provider of that font) shows that, indeed, it does
not contain a glyph for that ‘◆’ character.
>> 
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>> 
>> 
>> 
>> 
>> 
> 
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt
Previous Message
Next Message

Message thread:

Possibly related: