0

I have a customized icon font using svg and set the font-size as

.c-class {
   font-size: 24px;
}

and 

.c-class:before {
   font-size: inherit;
}

And if I hover on the icon, it's displayed as ( 24 x 25 ) instead of the expected output ( 24 x 24 ). I used the same structure for 32px and it worked fine. But I also had the same problem for 72px (72 x 73).

Is it related to the font itself or how can I fix to get the desired design?

For your reference, svg code is

<glyph unicode="&#xe900;" glyph-name="arrow-up" data-tags="arrow" d="M727.465 533.334c0-12.8-4.267-21.333-12.8-29.867-17.067-17.067-42.667-17.067-59.733 0l-98.133 98.133v-452.267c0-25.6-17.067-42.667-42.667-42.667s-42.667 17.067-42.667 42.667v452.267l-98.133-98.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l170.667 170.667c8.533 8.533 17.067 12.8 29.867 12.8v0c12.8 0 21.333-4.267 29.867-12.8l170.667-170.667c8.533-8.533 12.8-17.067 12.8-29.867z" />
khet
  • 95
  • 11
  • It could be both the SVG source and the conversion tool. We need to know more about both to help you. For a start, please show the SVG code for the icon. – ccprog May 16 '18 at 14:28
  • Hi, thanks a lot for your answer. I have already provided the svg code in my question. Br – khet May 17 '18 at 03:22
  • I am puzzled - what is your environment? Apart from old Safari, no browser has ever implemented SVG fonts. I had thought you had some SVG icon files compiled into a webfont format like .woff2 and was asking about those source files. How do you compile the font? If that SVG font is really your source, the information needed are the positioning and sizing attributes from the `` element. – ccprog May 17 '18 at 13:13

0 Answers0