I am developing a website that must print a page that contains Font Awesome icons. The issue is that when you go to print, the Font Awesome icons will not print in color.
In the browser they show up in color, but when the page is printed the icons are solid black. Is there anyway to make the Font Awesome icons print in color? Perhaps through CSS with #media print { }?
EDIT: Also, I am developing in firefox.
It turns out that the item that you actually need colored isn't the i itself but its :before element. Thus:
<style type="text/css">
.fa:before { color:red; }
</style>
If you are using bootstrap you need to edit its CSS since it's specifies black color for "#media print"
I just put together a simple HTML example using font-awesome and it seems to work fine in Chrome and Firefox for me. I see the icon in red onscreen and it also prints in red without any further action. Having said that, creating a separate media CSS is a good idea if your HTML page warrants it, since it can provide a better user experience (onscreen view isn't always ideal for printing).
Are you sure you don't have a printer setting modified to not print in color? Is the printer out of that color and thus defaults back to just plain black? Have you tried it in another browser (Chrome, Safari, Opera, IE)?
Here is the simple code I used for testing:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Fontawesome Test</title>
<style type="text/css">
.fa { color:red; }
</style>
</head>
<body>
<i class="fa fa-camera-retro"> Testing color</i> fa-camera-retro
</body>
</html>
Related
I am having an issue as I cannot override the styles of the elements on my website with my custom stylesheet. The issue is because of the foundation.css file as well as the normalize.css possibly. For some odd reason though the styles do override while being in a mobile resolution which has me completely lost. For example in my custom stylesheet (app.css) I have the following line:
li a {background-color: orange;}
Just for testing measures obviously. As the code above is shown you should be able to tell that any list with a link should have an orange background color. When viewing the website in my native resolution (1920px x 1080px) none of them are shown with an orange background. You can view an image of what I have explained.
As you can see the blue button shown with "Right Button Active" inside of it is the default color that the foundation.css stylesheet makes it. Now when I change my Google Chrome window to a thin window and take a look at the "Right Button Active" button it actually turns the button orange as you can see at the following picture.
I have looked at the other question mentioned on stack overflow: How do I get my #import stylesheet to override the main stylesheet?
and tried to follow that solution but that didn't work for me in solving my issue. What makes me confused about my situation is the fact that my stylesheet will work on the mobile dimesion window but when I am in my native resolution and have the window showing on fullscreen it does not show up as I have it styled in my custom stylesheet.
Here is my head.php file to show you how my stylesheets are sorted and / or arranged:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation example</title>
<link rel="stylesheet" href="foundation/css/normalize.css">
<link rel="stylesheet" href="foundation/css/foundation.css">
<link rel="stylesheet" href="includes/app.css">
<script src="foundation/js/vendor/modernizr.js"></script>
</head>
<?php
include 'header.php';
?>
Any ideas?
The Proper Selector
You need more specific selector to make it work like you need.
The better way is to set up variables in Foundation's settings.scss file. However, SCSS compilation is needed in this case and if you don't want to do it (or if you simply can't) these lines will be enough:
.top-bar-section li.active:not(.has-form) a:not(.button) {
background-color: #FFA500; /* orange color */
}
.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
background-color: #F09600; /* darker orange, lightness -6% is Foundation's default */
}
Note: You don't need using !important if you include app.css style file after the Foundation's one. It is better to avoid of usage of this keyword.
CodePen working example
Note: If you don't use the proper selector then you take a risk than some other stuff change their color too which shouldn't be the correct behaviour. However, if you want to change blue color to the orange one in general you should use SCSS distribution of Foundation, change $primary-color variable and then compile your own CSS.
How To Find Proper Selector
You need some web development tool, e.g. Firebug, which is abailable for all modern browsers. Then use it as is described below:
Select inspect element tool.
Click on the element which you want to inspect.
Search for the attribute which you want to change - in your case, you are looking for attribute background-color. Then you can see the selector and you are also able to redefine color in the Firebug tool in place to see results immediately.
If your foundation.css has more specific rules to what you are trying to change, they could override your code done in app.css. One way to try this is to put the !important at the end of your CSS-statement, before the ; of the row.
In a case if that changes something, you should inspect your website via your browser's inspector in order to figure how it is being styled and what overrides what.
Please refer to this question for more information about load order and rule priorities.
You have set the orange colour here in app.css
ul.dropdown>li>a{background-color: orange !important;}
This is only pointing to the drop down list for styling, not the button you hover/click to get there. Add this to your app.css style sheet and I am confident it will fix it.
ul .has-dropdown a:hover {
background-color: orange;
}
I am having this huge issue with IE 11, I can't get any variation of the color royal blue to display correctly as a background color. The background color works great in firefox and chrome.
I have tried all of this in the CSS file:
background-color:navy;
background-color:navy !important;
filter: none !important
I have tried other colors, like blue, and have tried to use just the color codes.
I have tried to force compatibility, If you run IE in compatibility, it will display the color correctly. I can never seem to get IE 11 to run compatibility from HTML. I have tried the the following:
<meta http-equiv="X-UA-Compatible" content="IE=8">
I am using the Doc Type tag as well:
<!DOCTYPE html>
How it looks in Firefox:
How it looks in IE 11:
No matter what I do, I can't get internet explorer to display the background color that I want. Can someone please tell how I can accomplish this?
This seems like a really strange behavior, as color constants have been supported by IE for quite a while. Your post contains a number of details, but not enough to help identify what might be going wrong in your case.
This JSFiddle works correctly on my machine; that is, it changes the background color of the body element as requested. Both navy and royalblue appear to work as intended on my copy of IE11.
Also, this MSDN sample, written originally for IE8, continues to work in IE11 (though you need to use the F12 tools to switch the document mode. BTW, that page also shows how to correctly declare the x-ua-compatible header to IE8 mode, if you're looking for such a live sample.)
To specify this (and the x-ua-compatible) directive in a bare bones HTML page, I might be tempted to use something like this:
<!doctype HTML>
<head>
<title>My page title</title:>
<meta http-equiv="x-ua-compatible" content="ie=8">
<style type="text/css">
body { background-color: navy }
</style>
</head>
<body>
<p>Hello, world</p>
</body>
</html>
If your machine is not showing this, then I would consider other environmental factors, such as basic syntax errors, out of date video drivers, loose cable connections, or related things
Hope this helps...
-- Lance
If you are getting the wrong blue, it's most likely how IE is reading the color "Navy". Have you tried using specific HEX codes? A browser will read a hex code the same, but color names can appear differently, try using the HEX Code like below.
background:#000080; /*Navy BG Color*/
or
background-color:#000080; /*Navy BG Color*/
My IE displays these as the same colors.
Heres a site you can get the browser HEX codes for each color name:
http://www.color-hex.com/color/000080
I am using the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>This arrow here: <span>↩</span></div>
</body>
</html>
And this is my style.css:
span > a {
color: #F5413C;
}
On Firefox 31 (Windows 8), it displays just fine:
However, on my tablet (Samsung Galaxy Note 10.1 2014) the arrow appears as a thick blue:
How do I fix this? Can this be fixed? Is there, somewhere, a list of ASCII characters that display fine across all platforms?
Unfortunately, I can't find developer tools on Chrome on the tablet, so I can't diagnose this problem.
The arrow is rendered in an emoji font, which likely exists on the tablet but does not exist on your desktop. Or the emoji font is the only font on the tablet that contains this character at all, while your desktop has a wider variety of fonts which contain this glyph in a "more traditional" form and are chosen before any emoji font.
The solution is to set the font explicitly to a font which shows the character in the way you desire, and which also exists on the tablet. If the tablet doesn't have any font that contains this character other than the one you're seeing, there's not much you can do besides using an image instead.
I'm having trouble with a print in html, because my background color web-site is black and when window.print() is activated i need the background color switched to white.
How can I do this? considering Time X Work.
I´ve tried to change Css, transform to PDF and others.
I can´t use PHP.
You should be able to do this in a stylesheet with an #media print directive.
You can configure a separate stylesheet for printing. Take a look online at print stylesheets.
E.g. http://www.alistapart.com/articles/goingtoprint/
The key part being
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
You can then add this in the print.css stylesheet
body {
background: white;
}
to get rid of the background
I am trying to take printout an HTML (has 1 page)
Firefox 3.1 is taking 2 pages
and Firefox 3.5 is taking 1 page.
Donno what IE does.
Is there any way to globalize the printing thing (thru css or any method) so that it will print exact page that it shows.
You want to specify a unique style sheet for printing
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
vs.
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
Then in your print css use a standard font, basic colors and hide any adds, etc.
/* basic white on bl;ack 12pt font */
body {
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
color : #000000;
background : #ffffff;
}
/* Underline Links */
a {
text-decoration : underline;
color : #0000ff;
}
/* hide web-only content */
#navDiv, #adDiv, #etc {
display : none;
}
Yes, you should use CSS. Not always an easy task though. You could start here.
If you want precise printing, I'd suggest you output PDFs instead. As for html, you want to use a separate css file for printing, but still, just have to test each individual browser you want to support.
Well, there is the print media type and its page property, but that has extremely poor support in all major browsers. I think you'll be stuck with inconsistent print rendering for some time. You could read ALA's Going to Print for tips, though.