Wielokolorowe ikony Czcionki

Question

Ponieważ używam czcionek Icon, to było wielkim problemem mieć dwa kolory z jedną klasą zamiast grupowania pozycjonowania lub przycinania .. ponieważ często jest mieć wielokolorowe ikony w witrynie, Przyszedłem do rozwiązania dzisiaj, pomyślałem, że mogę po prostu opublikować to dla ludzi takich jak ja, którzy szukali odpowiedzi, ale tylko znaleźli komplikacje ...

Answer 1

OK, zamierzam to zrobić krok po kroku:

ILLUSTRATOR CZĘŚĆ

1. w programie Illustrator skopiuj ikonę do nowego dokumentu.
2. następnie wyciąć jeden kolor.
3. naciśnij Zapisz jako i zapisz jako SVG
4. , a następnie wklej wycięty i usuń drugi.
5. zapisz jako inny SVG.

ICOMOON

1. jest naprawdę wspaniałym miejscu.
2. uruchomić aplikację.
3. zaimportuj svg i pobierz zapis.

i to jest CSS I wykorzystywane do jednej klasy rozwiązania wielokolorowe ikony czcionki:

CSS

.icon-earth{ 
     font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
.icon-earth:after { 
    content: "\e006"; 
    color:#F33; 
    font-size:6em; 

} 
.icon-earth:before { 
    content: "\e007"; 
    color:#0C0; 
    font-size:6em; 
    letter-spacing:-1em; 
} 

HTML

<div class="icon-earth"></div> 

jego cichy łatwa interpretacja CSS dla własnych potrzeb, jeśli h ELP potrzeba proszę krzyczeć, a ja przejść przez ten krok po kroku aswell ...

i wreszcie Oto JSFIDDLE, chociaż nie mogę dostać niestandardowe czcionki Icon dzieje w JsFiddle ...

wsparcia Browser jest IE8 i więcej, a potem wszystko inne sprawdziłem ..