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 ...Wielokolorowe ikony Czcionki
8
A
Odpowiedz
7
OK, zamierzam to zrobić krok po kroku:
ILLUSTRATOR CZĘŚĆ
- w programie Illustrator skopiuj ikonę do nowego dokumentu.
- następnie wyciąć jeden kolor.
- naciśnij Zapisz jako i zapisz jako SVG
- , a następnie wklej wycięty i usuń drugi.
- zapisz jako inny SVG.
ICOMOON
- jest naprawdę wspaniałym miejscu.
- uruchomić aplikację.
- 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 ..
Powiązane problemy
- 1. Responsywny rozmiar czcionki Niesamowite ikony
- 2. Zmiana ikony czcionki w WPF przy użyciu czcionki niesamowitej
- 3. text-overflow: ellipsis usuwa ikony niesamowite czcionki
- 4. Jak stworzyć wyłączony stan czcionki niesamowite ikony?
- 5. Podczas korzystania z czcionki ikony, takiej jak FontAwesome, w jaki sposób ustawić ikony wiążące w jQuery?
- 6. Jak używać ikony czcionki (font-awesome) w selektorze kodu XML
- 7. Jak zmienić kolor czcionki Niesamowite ułożone ikony przy aktywowaniu
- 8. Dodaj nowe ikony do OpenUI5?
- 9. ikony AccountAuthenticator
- 10. Chart.js osi rozmiar czcionki czcionki
- 11. Czcionki internetowe i zastępcze czcionki
- 12. Dodaj ikony do JButton przy użyciu niestandardowej czcionki od znaków AwesomeFont i Unicode w Java Swing?
- 13. Używanie ikony czcionki (Font Awesome) wygląda na nieco rozmytą i zbyt odważną
- 14. Jak mogę używać ikon w menu widoku nawigacyjnego przy użyciu ikony czcionki w Androidzie
- 15. Ustaw kolor czcionki, wielkość czcionki i rozmiar czcionki w PHPExcel
- 16. Ikony JFileChooser na wyświetlaczach 2K
- 17. Kontroluj grubość czcionki bez zmiany rozmiaru czcionki
- 18. Zmień rozmiar czcionki i kolor czcionki UIBarButtonItem
- 19. Najprostszy sposób zmiany czcionki i rozmiaru czcionki
- 20. Wyrównanie ikony do ikony paska narzędzi - Android Material Design
- 21. Dodawanie ikony do QDialog
- 22. Załaduj ikony MultiFrame
- 23. Zmiana ikony dziennie
- 24. Ikony klawiszy klawiatury
- 25. Darmowe ikony wektorowe
- 26. Ikony wampserver nie działa
- 27. Ikony menu odcień
- 28. Karty bez ikony
- 29. WPF: Znikające ikony
- 30. Zmiana ikony paska akcji