Mehrfarbige Icon-Schriften

8

Seit ich Icon-Fonts benutzt habe, war es ein großes Problem, zwei Farben mit einer Klasse zu haben statt einer Menge Positionierung oder Clipping .. Da es ziemlich üblich ist, mehrfarbige Icons in einer Site zu haben, kam ich Across die Lösung heute dachte ich, ich könnte das nur für Leute wie mich posten, die nach Antworten suchten, aber nur Komplikationen fanden ...

    
Dawid van der Hoven 12.07.2013, 14:40
quelle

1 Antwort

7

Okay, ich werde das Schritt für Schritt machen:

ILLUSTRATOR PART

  1. im Illustrator kopieren Sie das Symbol in ein neues Dokument.
  2. Schneiden Sie dann die eine Farbe.
  3. drücken Sie Speichern unter und speichern Sie als SVG
  4. fügen Sie dann den ausgeschnittenen ein und löschen Sie den anderen.
  5. Speichern als ein anderes SVG.

ICOMOON

  1. Wirklich ist eine großartige Seite.
  2. Starten Sie die App.
  3. Importieren Sie die SVG-Datei und laden Sie sie herunter.

und dann ist dies das CSS, das ich für eine Ein-Klassen-Lösung für mehrfarbige Schriftsymbole verwendet habe:

CSS

%Vor%

HTML

%Vor%

es ist ruhig einfach, das CSS für Ihre eigenen Bedürfnisse zu interpretieren, wenn Hilfe nötig ist, rufen Sie bitte und ich werde das auch Schritt für Schritt durchgehen ...

Und schließlich Hier ist das JSFIDDLE , obwohl ich keine benutzerdefinierten Icon-Fonts in JsFiddle bekommen kann ...

Browser-Unterstützung ist IE8 und höher und dann alles andere, was ich überprüft habe ..

    
Dawid van der Hoven 12.07.2013, 14:40
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Sox in Windows verwenden