I created a custom vector font and trying to use it in some places that font awesome doesnt fit. However the font icons dont display property like the font awesome ones do. The CSS seems to be exact but I cant tell what is causing the issue. Below you will see the custom icon circled, while the others are font awesome. The icon just wont center like the font awesome icons.
You can find this markup on this page: Vegas Finals
The HTML <i> looks centered, but the :before pushes the actual icon up.
<i class="icon-ncaa icon-ebt-ncaa"></i>
The main thing is that your glyphs are not centered correctly inside the custom font.
You need to edit the .woff file (and other types if they exhibit the same problem)
You also should remove the btn-ncaa class from the container a tag as it alters the vertical-align and the whole button is misplaced as well in relation to the ones next to it..
Related
I would like to use Font Awesome icon in my project. I have included my kit in head section and put one icon into my code. However, it is not showing up, though I used font-weight, font-size, etc.
The icon is there it takes space and grows when I apply width and height, but it is not visible. Attempts to apply color failed, though background-color works well.
What trouble is it?
I have applied CSS rules for color and fonts and expect to see the icon on page.
I am using two different fonts in my website - "sans-serif" and "tradeGothicLTStd". Here is how these fonts are rendered in the browser.
You can notice that in the first screenshot there is some extra space above the font (If you see the uppercase text. Please open it in a new tab with black background to properly see the difference) and while using another font there is no extra space above the font (uppercase text).
Here is how they are rendered when used in a button.
Because of these inconsistencies the fonts go out of position vertically. i.e if I design my css with first font in mind the all uppercase fonts are centered vertically (inside a button or anchor tag etc) but when I change the font to the second font all text kind of moves little upwards since there is no extra space above the font in this case. Because of this my font is not perfectly vertically aligned in the center.
Is there any way to fix this or can someone even tell me why this is happening?
On your second picture the font also appears to be stretched.
You can scale the font with transform: scale(1, 0.9);. This will scale the font vertically on 90%.
Then, I would use line-height
I placed some Font Awesome icons in menu buttons to replace fixed-sized icons. When I do this with the CSS/Web Font approach the icons match the size of the text in the button. When I do it with the SVG/JS approach the buttons with icons are 1px taller. I can't find anything in my CSS that adds the extra pixel. The result is that a row of these menu buttons does not have a consistent height.
My markup is exactly the same in both cases; I use the <i> technique.
I can't tell for sure, but it appears the SVG/JS approach is being pushed by the developers (the CSS approach is described as "great ... for older browsers"). I'd like to use it, guessing that it's the future, but I'd really like to avoid redoing my menus if possible.
Has anyone else seen this problem and, if so, how did you resolve it?
This is in IE 11 with css properties
After disabling display property, the result looks like below
In first screenshot, icon is there but not it's not visible.
I don't want to remove display:table-cell property. I need this for responsiveness. Can somebody please provide me a better solution.
Don't change FA icons core css, they are best suited to be used as text, so all text manipulation properties will work just fine, everything else should be left as is. If you need to change some display, wrap icon with another element and apply css for it.
Odd problem which makes me suspect I'm missing something simple. Any ideas on the following:
I have a H1 tag with a sans-serif font (loaded from Google fonts) and if I give it a background-color you can see the text isn't aligning to the left of the containing tag:
If I add a serif font you can see taht it does behave how I need it to, the text is up against the left hand side. When I turn it on/off in dev tools it is simply adding/removing the serifs:
There are no styles applied to the H1 other than a font-weight. Tried resetting my margins but to no avail.
I can set a nagtive margin but that won't work for all resolutions.
It's in the font glyph itself, so no way to circumvent it easily via CSS unless you edit the font itself. See the following screenshots.
Serif:
Sans-serif:
Tool for reference: http://nodebox.github.io/opentype.js/glyph-inspector.html
The kerning will be off. It occupies a set width, irrespective of whether the letter is at the edge. Free fonts are known for it. The best way to combat this is to use a different font.