Dear stackoverflow Users,
im trying to use a Glyph of a Font on my Website. I want to place "↗ produkte", but the Browser displays The Arrow up as a blue Icon.
What it looks like right now:
Blue Arrow
What i want to Archive, is that the browser displays the arrow of the font kit: Font Arrow
Do you now a Way to archive that? I could place it as a SVG image in the p Tag but is there a Way to Use the Glyph ↗ in the p Tag too?
Thanks!
How do you stack icons in Iconmoon like the ones in Font Awesome's fa-stack. If not not possible in Icomoon how in CSS? Thanks for the help! For example if you have two icons a plus sign and a box how do put the plus sign icon on top of the box icon.
I'm using PrimeFaces6.1 and my primefaces.THEME is afternoon. I would like to make my panel overlay look the same as the tooltips. Therefore, I need to figure out what the tooltip background color is. It's obvious the font color is white.
I have found information on how to override the tooltip colors and I guess I could do that, but I really like the theme color. Anyone have an idea on this?
You could find out the back-ground color for p:tooltip used in Primefaces 6.1 in components.css
Path: primefaces-6.1.jar\META-INF\resources\primefaces
open the components.css
and search ui-tooltip-text{padding:3px 10px;background-color:#4c4c4c;color:#fff}
I have a big problem in css with the font Open Sans
The issue is that I wanna see a phrase in white color with (light) open sans font, instead it appears bold only when using white color ! However when I write the same phrase in black or other color it appears light.
Any ideas ?
here is the code in this link :
http://shrib.com/ILjxuPtM
Test it please, and tell me what's wrong.
Here is an article about font rendering.
CSS color is another factor. Varying contrast between text color and background color can significantly change how type looks. Lower contrast means that anti-aliasing appears more subtle — the graded steps from foreground (type color) to background are less dramatic.
Light-on-dark text tends to look thicker than dark-on-light, so lower contrast makes an even bigger difference in these cases.
I guess you can simply use the font-weight property to adjust the font.
Anti-aliasing on Macs makes light text in Open Sans on a dark background appear bolder. You can adjust the font-smoothing options to something else than sub-pixel to avoid this.
I used Photoshop to stack a layer of dark text on a white background at 50% opacity on top of a layer with the same text, but light on a dark background. As you can see, there is a white fringe around the dark text, which should not be there considering they are equally bold.
I am creating a template for my company that will be used down the road on a variety of different clients sites, and they will all range in color. I have created icons for this template that are currently black (or white) and I want to be able to control the color of these icons via css. They are one simple color and in photoshop if you do a blending option of color overlay and choose 1 color, they look great. Is this possible to do in css so when someone is editing this template for future clients that they can control the icon colors in css instead of having to edit every icon in photoshop every time?
It's possible to change the color of a logo in CSS, but not to solve the problem you are talking about. To make a changeable logo you would make a PNG with transparency where the logo is and background color (of the webpage) in the negative space. Then put it over a P or div that has the logo color you want as its background color.
Trouble is, you have just exchanged having a flexible logo color for an inflexible "background" color.
Better to just include both colors of logo, white and black, as part of a "package" that is put up with all websites. Just call the one you want in CSS where you want it.
If your icon is a shape you can make in css, it could work, but I have never heard of anybody doing what you are talking about before.
Its not possible to change the color of icon using css. You can shape it,you can give transparency,opacity etc
Not possible via CSS. You can use some dynamic technologies like Canvas, but it's not good way. I would rather create tool to create icon sets in desired color. You can do it with PHP (phpGD or ImageMagick here is example of similiar problem).
You can do this with images (as long as the background colour is consistent) but it requires thinking outside the box a bit. Open the icon's image file in Photoshop (or similar). Edit it so that the "icon" part (i.e. the bit that is currently black) is transparent, and the background (i.e. the bit that isn't what the icon depicts) is filled white (or whatever the background colour of the site is). Essentially you've "reversed the polarity" of the image. Put the image in the web page, then use CSS to specify it's background-color. Your icon should appear in that colour. Edit: Something like this: http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/
A [potentially] much simpler approach would be to use an icon font like http://pictos.cc/. That's just text really, so you can colour it with CSS as usual.
You can do this with CSS pseudo elements and translucent overlays. You can follow the instructions here: http://www.impressivewebs.com/image-tint-blend-css/
If you have a vector logo, you can do this with SVG logos even easier (by altering your SVG colors).
If you make the icon images into a font, then you have full control over both size and color via CSS. Check out the very popular Font-Awesome font, designed to compliment Twitter Bootstrap.
I'm no font expert, but if this approach sounds like a fit, you'll do something like:
create vector graphics from your icons
load them into a font editor, like FontLab Studio
add the new font to your favorite web application. If you need a guide for this, FontSquirrel.com generates great #font-face markup to include their library of free fonts.
It can be done and works well with Firefox and Chrome as far as I know. Example below.
http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS
img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
I would say the best/easiest answer is to use SVG. The logo should probably be in a vector format to start with so that it can be scaled without detail loss from business cards to billboards.
SVG 'images' are based on shapes. Give the shape you want to change a name, and then address it in CSS to change it's colour.
This article:
http://css-tricks.com/using-svg/
and this example:
http://codepen.io/chriscoyier/pen/evcBu
Do an excellent job of explaining how to achieve this and also show off other possibilities.
SVG at least the basics are now widely supported, ie8 is the only browser holding it back and even so there are ways around this via rendering SVG as an image on the fly.