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
Related
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.
When I looked up the theme files , It has a folder Named glyphicons , in /wp-content/plugins/nhpoptions/img/glyphicons , This folder has png images naming glyphicons_000_glass.png and so on , upto glyphicons_349_readability.png , I thought it would be too simple and I just need to replace the images with my own so I renamed my image glyphicons_349_readability.png and replaced the old one but this did not solved it. Still the same icon is appearing . Please tell me what am I missing ,
here is the screenshot of the dir
Test Site Link = http://test.yoapp.nl/
Theme = http://themeforest.net/item/couponer-coupons-discounts-wp-theme/8322172
*****UPDATE*****
There is a file named font-awesome.min.css in the theme , It has the icons added from font awesome , Now I figured out to add more icons from font awesome but still I am stuck on adding my own icons.
The author(s) of the theme is using CSS to embed the icons using the font-family and content attributes in the style.css file. For example:
style.css - line 713
.filter-tabs ul.nav-tabs li.active:before {
font-family: 'FontAwesome';
font-size: 32px;
color: #24b6ac;
content: '\f0d7'; /* This refers to fa-caret-down */
position: absolute;
bottom: -14px;
left: 47%;
}
And
a.btn-top:before {
font-family: "FontAwesome";
font-size: 31px;
content: "\f0da"; /* refers to fa-caret-right */
position: absolute;
left: 14px;
color: #fff;
top: 128px;
}
These can be found in your style.css file. There is 4 more instances which you can track down yourself I'm sure. This is done by setting the font-family attribute to Font-Awesome and setting the unicode for the content property. You can see a full list of the icons, including their class and unicode here: http://fortawesome.github.io/Font-Awesome/cheatsheet/
How do I get dashicons to work in a WordPress meta box? I want to do something similar to the calendar icon that is in the "Publish" meta box next to "Published on".
I have no trouble at all using them as the icon for the custom post type and in the "At a glance" on the dashboard.
This is what I am doing:
#time_control_area #expire:before {
content: "\f235";
top: -1px;
}
And this is my result:
I have tried to enque the dashicons styles which has not worked. I cannot find good documentation anywhere on how the dashicons work with WordPress.
Inspecting the back end of one of my sites, the styling for each of the :before tags that show the WP-default icons seems to be hard coded into wp-admin\load-styles.php.
It looks like you'll need to manually add font: 400 20px/1 dashicons; and possibly some of the other rules to your css to get this to work. Alternately, you could try applying one of the classes WP uses your menu item.
Full css I see for the WP-default icons:
#post-body #visibility:before, #post-body .misc-pub-revisions:before,
.curtime #timestamp:before {
font: 400 20px/1 dashicons;
speak: none;
display: inline-block;
padding: 0 2px 0 0;
top: 0;
left: -1px;
position: relative;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none!important;
}
When you hover over a link, it tells you where the link takes you to. How can I find out the CSS needed to output the same thing?
I guess I'd only need to know the exact color / font style etc that the browser uses to make such a message.
The default font and style vary from browser to browser
The user might not be using the defaults
Why?
You most like want something along the lines of a span or div with the following CSS
#fakeStatusBar {
background: #CCC;
display: inline-block;
position: fixed;
bottom: 0;
left: 0;
}
so I'm using fancybox, as well as Google's minify http://code.google.com/p/minify/
but then after minifying the fancybox css, when I click on something that is fancyboxed, the close button on the fancybox disappears from it...
I checked the minified css source code, and there doesn't seem to be anything wrong with the close property:
#fancybox-close{position:absolute;top: -15px;right: -15px;width:30px;height:30px;background:transparent url('/jqui/plugins/fancybox/fancybox/fancybox.png') -40px 0px;cursor:pointer;z-index:1103;display:none}
versus the normal version
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
does anyone know how to make fancybox close button still work despite minifying css using google's minify...
without minification, everything works correctly
The image path is probably wrong, try giving it a background:red or something and see if it shows up.