0

I need to create something like a colored webfont. I got a project where I am using font awesome and a custom icon font.

My problem is that I need something like a multicolored icon:

enter image description here

Is it possible to create such a font or do I have to use an image instead? A font would be nice since the icon should be scaleable.

Hope you guys can help me!

Andre Zimpel
  • 2,323
  • 4
  • 27
  • 42

3 Answers3

1

Use Gradient 

background: rgba(231,56,39,1);
background: -moz-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,56,39,1)), color-stop(29%, rgba(240,47,23,1)), color-stop(48%, rgba(246,41,13,1)), color-stop(49%, rgba(246,41,12,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(100%, rgba(248,80,50,1)));
background: -webkit-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: -o-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: -ms-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#f85032', GradientType=1 );
height:100px;
width:100px;

And see this link http://jsfiddle.net/bipin_kumar/37fnW/1/

Bipin Kumar Pal
  • 1,009
  • 2
  • 8
  • 16
0

I don't think there is an easy way to do this with fonts. The first thing that came to my mind was Symbolset and I just checked, wrapping half of a word in a span with different color works, but the line is vertical.

You should use an empty element with CSS gradient or an image (SVG? Support is okay.)

MildlySerious
  • 8,750
  • 3
  • 28
  • 30
0

Unfortunately I don't think you're going to be able to use web fonts in the way you'd like to on this one. You've got another answer here on how to build up the same shape using backgrounds/gradients, but if you want something a little more cross-browser compatible, I would suggest you take a look into exporting your vector graphic as an SVG and embedding it that way.

Here's a good article to get you started: http://css-tricks.com/using-svg/

This will ensure that the graphic remains scalable (as a web font would be), using CSS to set the height to 1em will also keep the element at the right height to it's parent font-size.

There are still fall-back issues with SVG and older browsers, but these can be fairly easily worked around by using an image representation for those browsers that can't display the SVG.

Basically: there's a few options out there for you, but I don't believe that a web-font is one of them in this instance.

Good luck!

johnkavanagh
  • 4,614
  • 2
  • 25
  • 37