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.
Related
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
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.
Hello I have found a strange issue on a website I am working on.
I can't figure out why this is happening, but some text with a color assigned via css looks darker then it should be. I am am using the gantry framework for wordpress, but I cannot find any kind of css filter applied that would be causing this and there is no layers on top of the text.
What is weird is if I add position:relative and z-index:1 to the text's container it becomes lighter(closer to the correct color). I made a video of me toggling the z-index on and off with the chrome inspector. Can see it here; http://screencast.com/t/RsuK0h4C7o. I have set a block above the text to the same color so you can see the different text colors changing.
Another weird thing I noticed is that the text stops doing this at larger font sizes.
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)
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..