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
Related
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.
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'm using the latest Extension Library 11 at time of this posting. Some glyphicons are available while others are. When inspecting the bootstrap.min.css file with Firebug, I noticed the glyphicons I can render on my page are visible in this file, while the icons I cannot get to display shows up as a empty box in the css file.
<pre>
.glyphicon-cloud:before {
content: "☁";
}
.glyphicon-envelope:before {
content: "✉";
}
.glyphicon-pencil:before {
content: "✏";
}
.glyphicon-glass:before {
content: "";
}
FYI: I do not have any loading errors on the page.
I suspect this blog post contains the answer.
http://bootstrap4xpages.com/bs4xp/site.nsf/article.xsp?documentId=F435B6DC54486B67C1257B6B002E5A6C&action=openDocument
I reported this earlier to GitHub. Follow the link for how to fix https://github.com/OpenNTF/XPagesExtensionLibrary/issues/11
You will run into the same problem when using a Bootstrap theme beside the one in Extlib / BS4XPages plugin. In that case I don't use the minified CSS and edit it, commenting out the part where the glyphicons generally are defined (references to the font resources). As the icons are the same in every theme you can get this won't do any harm and the icons keep working.
Some themes don't have the Glyphicon stuff in it and contain just additional CSS information for colors etc. In that case there is no problem with icons.
I beg you,some one please look at this , i am helpless to get it out.
I am doing a site for my client and created a responsive menu.
The font style for the menu is not working even though I marked it as important.
My site url is.
http://sparrowhair.softcorp.ca/
The style i am trying to use is.. Cocktail Shaker
Please help me.. Client is very hurry..
I have only half an hour.. and trying it from morning.
Thanks in advance
You're trying to fetch the font from Google Fonts, but it is no longer there. http://fonts.googleapis.com/css?family=Cocktail+Shaker is not a valid URL.
Try downloading the font and store it on your server. That should do the trick :)
You declared the #font-face in css as 'sagar_menu' instead of 'Cocktail Shaker'. Edit your css to use that family like so:
.navbar {
font-family: sagar_menu;
}
I am stuck, i have created a website with WordPress with zee style theme. I also applied a plugin named "FONT" to edit style sheet and apply custom font. All worked fine, my font was uploaded to the http://fontsforweb.com service from where i used to change the header.
After update of WordPress and the zee style theme all my work just gone and I am not able to use that font any more. The http://fontsforweb.com tried to help me, they made couple of updates with no positive result. So i remove that plugin and I tried to do it my self by converting my font to woff format and used the code below but still not working. I am afraid I will have to redo whole website. Please help me to avoid that.
Update: I played with other themes and the problem is exactly the same. In my opinion it's the WordPress it self making this problem.
#logo h1 {
font-size: 2.5em;
color: #fff;
font-family: "jadem___";
src: url('jadem___.woff');
}
I think the proper way to do this would be to create a child theme and edit your stylesheet from there. This article explains it better than I can Tutorial
This will sort of future-proof your theme and prevent it from changing if you update.
Also changing fonts is something you can do quite easily without a plugin. Again someone else can explain this better than I can
THis may see like a dodgy answer, but I think if you check those links it will make sense. This is the correct way to handle this long term and it's easier than it looks. Hope this helps.
"Font" plugin is now using WOFF file formats so try again.