I am using star icons from angular material to show levels, my target was that the stars will be next to each other. For that I used letter-spacing: -0.25rem; my problems that it is not render at all in ios platforms (there is spaces between the icons). I tried to add text-rendering: optimizeSpeed; and font-weight: normal; but it still doesn't reflected on ios browsers, can someone know what is the soution for that?
I'm happy to say that I received a solution to this problem.
Instead of using the mat-icon tag, I changes it to i tag and add class="material-icons" and to the material-icons CSS class
.neg-margin > * {
margin-right: -0.5em;
}
Link to solution:
https://codepen.io/GD_Design/pen/QWbYqxp?fbclid=IwAR1-emQXq1Yj3IjAonZUSCrCWYbVWmo283DGcvXNeNC0VqtvJ12vajCG7cg
Related
I made my own icon font and looks perfect in any browser from OS X:
But is shown with a vertical offset in any browser from MS Windows PC:
In this last example (from PC) the glyph appears below its element box (out of its natural box).
Is a span element:
<span class="sin-avatar circle s s-pluma-6"></span>
with a ::before pseudo element:
.s-pluma-6::before {
content: "\EA2F";
}
.s::before {
display: inline-block;
font-family: iconfont;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
There is a live example here (scroll to down):
https://stage.soux-calvo.online/
I'm going crazy, modifying CSS in many ways with no success.
Any suggestion will be appreciated. Thank you.
I found the bug. It was in the font build process (with gulp sketch). Some icons, I don't know why, was spoiling the font. Removing that icons, bug fixes.
Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially - to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different - maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.
So far I've patched Google's "material-icons" CSS class with:
{
font-size: 150%;
transform: translate(-10%,20%);
}
The Material-Design icons are also wider than the Font-Awesome set - I haven't decided how to address that yet. I haven't used many icons - there may be more issues with ones I haven't tried.
I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)
.material-icons {
font: normal normal normal 16px/1 'Material Icons';
display: inline-block;
transform: translateY(10%);
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
Better use
font-size: 115%;
vertical-align: text-bottom;
transformations make problems when you use line-height larger than 1
I had exactly the same issue of the two fonts just not playing together nicely at all!
No matter what I tried I could not fix this using CSS - each suggestion worked at first but broke down when using different font-sizes etc.
The closest I got with CSS was this:
.material-icons:before {
position: relative;
top: 0.135em;
}
In the end though, I used font forge to edit the actual font baseline and now it works a treat.
I also remapped the font into the same structure as Font Awesome so instead of:
<i class="material-icons">alarm_on</i>
I can do
<i class="md md-fw md-alarm-on"></i>
Not how the font was intended to be used and personal preference I know, but I much prefer this way of using icon fonts!
Please take a look at my site: http://burnett.inigowebdesign.co.uk/local_area
I am using Twitter bootstrap CSS (with HTML5 Boilerplate), Modernizr, and Google fonts using #font-face.
I am using modernizr to test for a browser's support of fontface- it not supported, I need to change the font-size (otherwise it will be far too large)
I am testing the site for compatibility and have noticed in IE8 (and early versions of Safari & Opera) my rules for font-size are being ignored. In particular, the h3 elements in the main list (that you can see on the left in the green box) don't seem to respond to any CSS I apply to them. I am using Firebug to inspect the rules, and can't find any possible conflicts. It even ignores !important. In fact, the only way I can style them at all is to use inline CSS.
What is going on??
The text is differ due to different font-size define in each css file.
In normalize.css h3 have 1.17em font size and in fontface.css font size define 50px . It might be possible the browser rendering the file in some different orders.
normalize.css file using this property.
h3 {
font-size: 1.17em;
margin: 1em 0;
}
fontface.css file using this property.
h3 {
font-size: 50px;
/* letter-spacing: normal;
font-weight: normal;*/
line-height: 36px;
}
I have been playing with Prettify and I got it working quickly. However when I tried to change the font in the css file i can't seem to see any change in the browser. I am using Silver Stripe as a CMS. In the CSS file from the website I have:
.typography * {
font-family: Ariel, sans-serif;
}
I have a separate CSS for prettify (and I know it works because the bg color changes, etc. only the font-family and font-size doesn't. Strangely font-weight does work).
pre.prettyprint, code.prettyprint {
font-family:monospace; /* doesn't work why? */
overflow: auto;
display: block;
font-size: 8pt; /* doesn't work */
background-color: #333; /* this works */
}
I am using Safari. I don't understand what I am doing wrong? I only seem to get an Arial font.
Apparently Safari doesn't support the monospace correctly. See more about it:
http://www.markwyner.com/post/16123207332/safari-vs-monospace-fonts
Here you can find the appropriate font for Safari to support:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
For the not working measurement unit - pt try using another unit to see if it gives you any result. Let me know if it worked.
I'm working on a responsive site. After viewing it on a device running iOS5, I notice that all my h2 tags seem to display twice, one on top of the other. I checked it on a device with iOS6 and it looks better, but not on the iOS5. However, when I change my h2 tags to spans (changing them to display: inline-block) it seems to work fine as well.
I'm not doing anything seemingly out of the ordinary with my HTML or CSS, and I'm also not using a z-index anywhere in the document so would anyone have an idea what is happening?
<h2>Hello</h2>
h2 {
display: block;
font-family: "Segoe UI Light";
font-size: 36px;
color: #C41230;
}
Seems your problem could be a font weight rendering bug. It might be inheriting bold styling. See this SO post. You could try setting your font weight to normal for h1, h2, etc.