We are using font awesome icons but all of a sudden the icons are not showing up while printing.
Yet those are visible everywhere else on the entire site. Just not while printing.
All the related assets like fonts and css are loaded locally from the site.
I have checked the #media print visibility and display attribute they are visible and block only.
Related
I have a web site that's using a print style to dictate how the pages look when printing.
We're using a Google font called Lato. The pages are printing fine in all browsers and even some colleagues Chrome browsers print the pages fine. However on my own browser and another colleague's the text seems to be printed in white and some glyphs apprear. It looks like the text is there but just in white as it still prints same number of pages, you can see bullet points, underlines etc.
I changed the font to a websafe Arial with !important on *, body and p selectors for print media type and this did make headers appear but body text still not appearing.
I have looked around for the answer and a close article was this: HTML links not clickable on mobile, but are clickable on desktop
On my site: https://venueswl.com/
In the footer (only on an actual mobile device) the mobile and email links are black. However across desktop and laptop, these links are white and correctly working.
I can't see any blinding errors either using the inspect element on Google.
Any ideas?
I have a custom font which I would like to use on my webpage but its edges blur slightly when viewed in Chrome. I have the font on my server and it's linked in CSS.
I'm trying to add custom Google Web Fonts to a Tumblr page, but they are not taking effect on mobile (iOS 7). Strangely enough, they work on my laptop just fine. I've added this line at the end of the head tag:
<link href='http://fonts.googleapis.com/css?family=Dosis:700|Lato' rel='stylesheet' type='text/css'>
and I have
font-family: "Dosis", "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
within the h1 selector in the CSS.
Again, the fonts render perfectly fine in Chrome on my laptop, yet they fallback to other (uglier) fonts in mobile Chrome/Safari on iOS7. The fonts render correctly on my Nexus 7, for what it's worth.
In addition, an "Archive" link appears in the iOS7 version, which is not specified anywhere in the HTML, and not present on non-mobile browsers. It appears that Tumblr is changing the HTML specifically for the iPhone; is there a way to disable this, or work around it?
Fixed it! There's a setting under Advanced Options called "use optimized mobile layout" which, when deselected, fixed my font issue and the unwanted "Archive" link. I had been hesitant to toggle this in fear that it would break the mobile layout, but it still resized to fit the screen.
Bootstrap version 3
Font Awesome version 3.2.1
I am having issues with bootstrap and font awesome on Chrome. When I originally load a page, the font awesome icons are displayed correctly. When I refresh the page, the icons disappear. **To clarify, the entire icon is missing, this is not the empty box issue that some others encounter.
I'm grasping at straws here, but I noticed there were differences in the order in which the files were retrieved between the original page load and the refresh.
When the page is refreshed, the font file is the last item to be retrieved, and it appears to be a cached version as well.
Finally, any icons that are located inside of a <div class="btn"> will be loaded when the mouse hovers over the div.
Any help would be much appreciated!
Initial page load
Page refresh
I guess you are on a Windows machine, right?
This is an old problem with Chrome. See this posting on CSS Tricks. The next to last post should be the answer to your question. Or in short: Use the PUA (Private Use Area) for encoding.
The Unicodes (PUA codes) for each icon are listed in the Font Awesome CSS file - see: Font Awesome uses the Unicode Private Use Area (PUA)... (around line 190).
I got the same problem in latest verion of chrome (33.0.1750.152)
Working solution for me: move styles from body to head section.