0

I'm trying to do a script that generates a font from SVG's, which works (more or less the same code as provided on https://www.npmjs.com/package/gulp-iconfont for usage)

So that's good so now my real question comes, is it possible to use that gulp package to generate two colored emoji's?, if so can i get a link to read more about it or a sample?

AlexanderYW
  • 217
  • 1
  • 7
  • So i got a down vote for asking a question, please provide a reason so i can make it better if i'm lacking something – AlexanderYW Oct 28 '16 at 11:09

1 Answers1

0

Font icons are one colour - because they are treated as text by the web browser. This is done so that CSS rules like color: red; can be applied.

You can make two-colour SVGs, and use them directly in the DOM with an <img> tag. However, support for older browsers (IE 8 and below) is limited. You'll need some kind of fallback (a PNG image works quite well).

You might consider making use of negative space to give the effect of having two colours. However, I can't find any examples (only did a quick search) of this being used within emojis.

I hope this helps.

Alex Mulchinock
  • 2,119
  • 1
  • 18
  • 25
  • Not quite what i asked for, i know how text are treated and how the unicode works, but i want to make a emoji font, but my question is, can the gulp script(gulp-iconfont) generate those emoji/icon fonts from a template because the documentation doesn't say anything about that And if i can achieve that then i can make a font just like on mobile phones or on the web with smileys – AlexanderYW Oct 28 '16 at 11:41
  • Ok, so assuming that you don't want to use TIFF or WOFF format - you can ask gulp-iconfont to export the SVGs directly as SVGs (this gets around the issue of only having one colour). Regarding 'phone-esque' smileys - you'll need to know the unicode characters used by each emoticon. From there, you can configure your CSS to serve up the correct SVG file for each unicode character. Hope this helps. – Alex Mulchinock Oct 28 '16 at 13:15
  • Thats not i'm saying. I want to automatic create the icon-font through gulp, which generates the combined unicodes for the smileys, but thanks for trying. Also TIFF is not a font format, its a image format – AlexanderYW Oct 28 '16 at 19:31
  • I'm sorry that I was unable to offer the information you were looking for. However, I've read through the documentation for gulp-iconfont, and it will do exactly what you've asked- based on the information I've already given you. Configure it to spit out SVGs and so that it writes the unicode characters into your CSS (https://github.com/backflip/gulp-iconfont-css) for you. Regarding the mixup with TIFF, I meant to type TTF. I hadn't spotted that :) – Alex Mulchinock Oct 29 '16 at 17:13