I've seen this 'FontAwesome icons looks pixelated/blurred' issue various times on stackoverflow or their github but none of the solutions worked out for me.
Here is an example:
https://plnkr.co/edit/CmviS7TuPcIJX20G?preview
The top 3 list items use Font-Awesome to create a 'fancy checkbox' while bottom 3 list items use a regular border-radius (and some transformed rectangles to form the checkbox... not optimal).
The bottom 3 border-radius list-items looks much better to me than the top 3 FontAwesome ones (but the form framework we using uses Font-Awesome so hoping to just fix it with some simple CSS fix).
I checked latest version of Chrome/Firefox/Edge/Opera (on Window7)...
The top 3 list-items which use Font-Awesome look a bit jagged on all browsers (especially the main white circle). Attached is a pic:
I'm using FontAwesome 4.3 but seems like people had the same type of issues in Font-Awesome 5 as well (believe I tried that FontAwesome 5 file as well to no avail).
Things I've tried which seen on other posts:
put the SVG font file higher up in the #font-face css rule in the
font-awesome.css file (i tried that locally on my computer but that
didn't work).
adding something like "-webkit-font-smoothing:
antialiased;"
adding a temporary tranform onto the checkbox item
like "transform:rotateZ(0.5);"
use a font-size in a multiple of 12px or 14px or 16px (depending on which version of Font-Awesome using). For this example, I used 14px since that seems to be the base font-size for .fa.
Open to suggestions to try,
Thanks!
Have to post some code if I am linking to a plunkr so here is the main CSS for the Font-Awesome items:
.has-font-awesome li:before {
font-family: FontAwesome;
font-size: 48px;
content: '\f111';
color: white;
position: absolute;
top: 0px;
left: 0px;
}
.has-font-awesome li:after {
font-family: FontAwesome;
font-size: 36px;
content: '\f00c';
color: black;
position: absolute;
top: 7px;
left: 3px;
}
After enabling Windows ClearType, and restarting computer then the FontAwesome icons look as crystal clear as the border-radius icon:
Looks great on all 4 browsers now.
Apparently "ClearType is enabled by default in Windows 7, 8, and 10".
So maybe i turned it off.
Related
Hoping someone here has seen this before. I have a site that required me to remove the default bullet points and replace them in css, on every browser and mobile device it shows up the way I've style it to aside from IOS.
I've checked safari and chrome on my iphone 6s and in the list where I replaced the bullets with a white box it's changing it to a rather large box with a black gradient.
This is how it looks on a pc/android - the bullets are orange which is the desired colour
An this is how its displaying on all IOS mobile browsers:
This is the css that I'm using for the bullets:
section.specificationsSection ul li:before {
content: "\25AA";
font-size: 37px;
display: inline-block;
width: auto;
line-height: 15px;
margin-left: -.8em;
color: #f15822;
margin-right: 8px;
margin-top: 4px;
}
I'm stumped, I've looked around to see if anyone else has seen this, asked a few designers and developers with no luck, any help is welcome! thank you.
iOS may be replacing the "\25AA" entity with a black square emoji? (reference: https://www.iemoji.com/view/emoji/521/symbols/black-small-square)
We had this issue as well. We switched to "\25FC", which looks similar to "\25AA" and avoids the huge, beveled look on iOS. We've only needed to use it in black color, though.
I have a font icon in use in a site I support, and an issue has been raised that it is no longer displaying, and instead displays the square not found icon.
font-family: 'iconfont';
display: block;
content: "\ea10";
height: 100%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
Can anyone explain how this will have happened, as I can see this working in a time machine and the font hasn't changed since then.
Thanks
Open devtools in browser and verify that the font exist.
Check the network tab to see if the font is downloaded when the page is loaded.
As you can see here the following fonts are downloaded.
In your case check the style to see if the style does have this font in its list.
Verify that no other style overwriting this font
On this site:
http://c3.finearts.txstate.edu
I styled the right sidebar navigation using:
.sidenav a:after {
display: block;
position: relative;
z-index: 0;
top: -3.6em;
left: 0.15em;
width: 90%;
content: ".";
font-family: 'Ropa Sans', helvetica, arial, sans-serif !important;
font-size:1.5em;
padding-top:1em;
padding-bottom:1em;
padding-left:0.7em;
margin-bottom:1.16em;
background-color: rgba(51,50,48,0.9);
background-image: url('http://uweb.txstate.edu/~j_f166/codepen/images/notch.png');
background-position: top right;
background-repeat:no-repeat;
}
.sidenav a:nth-child(n+2) li{
margin-top: -4.4em;
}
In Firefox 3.6.17 it renders like this:
http://www.browserstack.com/start#os=Windows&os_version=7&browser=Firefox&browser_version=3.6&zoom_to_fit=true&url=http%3A%2F%2Fc3.finearts.txstate.edu&resolution=1024x768&speed=2
(it only takes a moment to load...I'm a newbie here so I can't post a screenshot).
although according to caniuse
these pseudo-classes should be supported starting with 3.5.
As an added hassle, I am using our university's content managements system. It's a Magnolia system. I am 99% positive I can't alter the head to insert javascript.
So three questions:
Is there a css fix I can use to get these pseudo-classes working in this and nearby Firefox version?
Is there a polyfill?
If so, where can I insert such a polyfill given that I don't have access to the html head?
Thanks a bunch. Of course I just noticed this (it didn't show up in BrowserShots and I just happened upon it when doing random testing on colleague's machines). The site is to go live to the University tomorrow.
Yay,
Jill
I believe the issue has something to do with Firefox 3.6 not liking how you have li tags inside anchors inside ul tags, not your CSS. It seems to be trying to automatically fix your markup structure, which is then breaking your CSS.
Take a look a the following screenshot from FF 3.6 and you'll see that your anchor tags are being duplicated:
FF 3.6
Now take a look at this screen shot from Chrome where I've recreated the erroneous markup that FF 3.6 is rendering:
Chrome
This COULD be an issue with how your CMS is serving markup to FF 3.6 but I doubt it. My money is on FF seeing un-semantic markup and trying to "fix" it for you.
If you absolutely had to keep the markup that you're using, then you could try looking for CSS hacks for firefox 3.6, or even use a browser sniffing library like WhichBrowser.
However, I would recommend tweaking your CSS to work with markup that looks more like this:
<ul>
<li>
</li>
</ul>
Some browsers will try to "fix" your markup for you if it's not organized in a way that it was expecting, and this structure is more semantic.
I am having a lot of trouble vertically aligning an entypo icon font.
Here is the codepen which currently displays as intended on Safari and Chrome on mac - http://codepen.io/anon/pen/jJtwz
As you can see the right arrow is vertically centred. Now the problem browsers...
Mac Firefox - The arrow is slightly lower but can tolerate this
It appears too low on the following browsers... (Every PC browser)
Mac Opera PC Chrome PC Firefox PC IE 10 PC IE 9
All the PC browsers seem to be resolved by adding a line-height:5px and getting rid of the top value.
Has anyone experienced the line height inconsistencies between browsers with icon fonts and know of a fix? It seems the OS has something to do with this as opposed to just browser inconsistencies.
I have tried all sorts of tricks like negative margins, absolute/relative positioning but cannot get consistent results.
Thanks
P.S. This was tested on all latest versions of browsers on the latest Mac OS and Windows 8
Here is the code if you cant view the link...
HTML
<section class="hbox hshop cfix">
<img src="http://placekitten.com/g/600/400">
<h3>Clothing</h3>
</section>
CSS
.hshop > a {
display: block;
border: 1px solid #ccc;
}
.hshop > a >img {
vertical-align: bottom;
padding: 0.75em 0.75em 0;
}
.hshop > a > h3 {
padding: 0.5em 0.6em;
position: relative;
font-weight: normal;
}
.hshop h3:after {
content: '\E766';
font-family: 'entypo';
position: absolute;
right: 0.3em;
font-size: 2em;
top:3px;
}
img {max-width:100%}
It was an entypo problem. The spacing around their glyphs was causing the issue. I used the icon fonts from fontello and this worked http://codepen.io/anon/pen/sidje
There are still inconsistencies in that entypo font. In all icon fonts.
The best solution I have found is set a baseline font size, and play around with you font metrics until you get something semi consistent Matching the base font metrics is a good start .This method works best if you keep the same size icon-font, changing the size throws everything off.
Also IE reacted better when I set the line-height a little smaller then the font size.
Really sloppy, but it got me close enough.
I fixed the font vertical space oiand made it available here https://github.com/zenx/entypo
I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>