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 protected]> 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 protected]> wrote:
>>
>>
>>> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala <[email protected]> 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 protected]]
> 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 protected]]
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/
