I am working on a site, and just recently, the social media icons are no longer appearing on the site, they are just boxes. The site in question is sccds.org.
They were working a couple days ago, and nothing was updated (It's a wordpress site) when they just suddenly stopped showing up. The link used to serve the css is the same as it used to be, the icons are the same with the same classes, the plugin used to display the icons is the same, everything is the same, but for some reason, the icons themselves will no longer display.
There are no errors in the console and nothing is failing to load, so I am at a loss as to how the icons can just suddenly no longer show up. Any help with this is appreciated.
First thing to check is your styles. Some of the icons require a particular font-weight. Recently, I added a rule to my stylesheets which broke several icons I was using (and they were being rendered as boxes).
.fas, .far, .fab { font-weight: normal; }
Once I removed that from my css, the icons showed up properly.
Related
I was working on my page, when random icons on my page went missing, while others are displaying fine.
The icons that are missing are both some of Wordpress standard, some of Font Awesome and some from different plugins. Same services got some showing as well, even on same pages as showing here:
Screenshot that shows some missing and some showing icons.
The link for my website
The issue came after i saved a edit on the index page, but the mistake are going on all pages from here.
What have i done wrong and what can i do for avoid the issue?
Thanks
Add this style in your active theme style.css
.fa {
font-family: 'FontAwesome' !important;
}
font-family is overwrite in your theme.
Try adding Font Awesome on you header this may solve that
I check the tag and it should an if statement for IE9
I'm using opencart in farsi language and I decided to change the font of my website. First I tried to change the font style in "body" element in css. But unfortunately it didn't work. Everything was done carefully, I used "font-face", uploaded fonts and everything. But it didn't work and I did this in main css file.
* {
font-family: something;
}
After I did so, all of the pictures in the website have lost quality, and none of the icons are shown...
how can I fix it...?
Regards
Icons are not shown because you are overriding the font family.
Have a look at Glyphicons or Font-Awesome
http://fontawesome.io/
http://glyphicons.com/
They use a font to print the icons.
For the image quality I have no clue, try to restrict the range of your font override. Maybe it's a bug on the browser that gets angry if you set a font-familty to an img tag (I'm guessing)
I have converted material svg as font icons in my project using GULP, similar to custom icon fonts. Occasionaly, these font-icons are appearing jumbled/empty and on refresh, all icons are arranged properly in the site.
Example: instagram icon instead of apple icon
This happens occasionally and only in published site, why is it happening like this and how to solve this?
Note: After adding text-rendering:optimizeLegibility; in font css , this issue started.
Thanks
I have read how chrome renders fonts and the differences between other browsers etc. But recently I came up with a interesting scenario.I have two files. One is a wordpress page where the font is used in header. Other is static html page with same code. On static html page the text Restaurant Appliance Parts appears smoothly. But same browser and wordpress page the font is pixelated. What could cause this problem?
Here is CSS:
font-size: 60px;
line-height: 70px;
font-family: Arial;
Here is the image showing the problem.IFyou notice p and n and a you can see pixelated.
Here is the demo - HTML File:
http://restaurantapplianceparts.com/dev/wp-content/themes/vizio/test.html
Wordpress page: http://restaurantapplianceparts.com/dev/
I am using chrome on windows.
Regards
Ahmar
If we zoom-in the screen-shots (making sure that we do not resample the images) we can see that both sites display the same font, with the same colour and an appropriate anti-aliasing:
I suspect that this is nothing but a visual effect caused by the different decisions taken by the font rendering software when faced with identical texts in different contexts. For instance, the first sample fits exactly in a horizontal baseline but displays more artifacts in vertical lines. But they both look correct solutions to smooth text; it's only that human brain finds one of them more comfortable.
Apparently, there used to be a -webkit-font-smoothing CSS selector in Chrome but it's no longer available.
I've recently noticed that links wrapped around Fontello icons are impossible to click on Safari 5.1.7 (or should I say "latest" Win realese"). I really don't know what could cause the issue (other browser are ok). I was trying to mess with web-inspector and unclik every custom style that could affect Fontello.
Is somebody aware of any Fontello/Safari incompatibilities?
Took me long enough to realize that somehow Google Fonts are causing some sort of issue when set on a parent of "a" containig fontello icon.
For now there is one solution that I've found - "a" has to have extra
font-family: "fontello"
See my fiddle - http://jsfiddle.net/Nippon/Qu6W5/
Is there other way around it?