erstellen Sie mehrfarbige icons. Icomoon

Gewesen es ist so schwer zu finden keine klaren Informationen zum erstellen von Symbolen, mit zwei Farben (facebook -weißen und blau-, google - weißen und roten.....). Der Kunde möchte in der Lage sein, zu ändern, diese zwei Farben, wie er will. Ich habe auf der Suche um und ich habe nur http://www.programask.com/question_41701651_multicolored-icon-fonts# scheint ruhig, einfach und klar für die AUFTRAGGEBER Zweck (ändern die Farbe, wenn Sie wollen, aber ich habe nicht verstanden das Verfahren...).

Derzeit nutze ich icomoon, aber ich kann nicht herausfinden, wie das hinzufügen von Farben....

So habe ich verstanden, dass ich brauche ein Bild-editor, im Fall von facebook-Symbol, wähle ich die "f" und ich speichern Sie es in .svg und dann das gleiche mit dem hintergrund, aber "ohne f", und ich speichern Sie es in svg auch, aber dann.... wie ich Sie zusammen zu beziehen, um nur ein Symbol?

Brauche ich nicht, es zu tun mit icomoon obwohl (ich brauche aber freie software), aber kann jemand mir erklären, wie man Farb-icons durch css?

Danke

  • Diese Frage ist entweder zu breit, Meinung oder lädt zu Diskussion und so off-topic ist für Stack-Überlauf
  • css-tricks.com/using-svg
  • was meinst du? Es ist ein problem, dass ich mit css!!!!! Ich bin versucht, farbige icons habe ich erstellt durch icomoon und ich kann nur malen "hintergrund", ich habe versucht, zu finden auf google, wie man erstellen Sie zwei farbige svg-icons und ich kann nichts finden, außer den link Hinzugefügt habe ich, die ich als unvollständig. Warum ist es nicht ein Thema für Stack-Überlauf?
  • danke für den link. Obwohl.... ist es falsch. Ich kann nicht Weg, weil mein Vorgesetzter sagt, dass es falsch ist und eine schlechte Angewohnheit, sollte ich die Farbe verwenden, Pfade, keine hintergrund-Bilder....
  • Sie Las nicht weit genug.
InformationsquelleAutor eve_mf | 2015-10-27
  1. 3

    Erstellen von bunten icon-fonts mit icomoon ist ziemlich einfach, aber es verbindet Sie aus mehreren Glyphen vom Kurs ab und scheint keine Kenntnis von einem "Standard" Farbe (die Farbe, die geändert werden können, von der übergeordneten Klasse) - also müssen wir tun, definieren es als inherit im CSS :

    1) Erstellen Sie Ihre SVGs mit Ihrem Lieblings-Vektor-Anwendung wie Inkscape oder Adobe Illustrator.

    Wichtig : Icomoon (und nichts anderes) eine Glyphe für jeder farbigen Pfad in SVG, so stellen Sie sicher, um die join-Pfade mit der gleichen Farbe und verwenden Sie nicht zu viele Farben ...

    Illustrator macht es einfach beitreten compound path : https://www.youtube.com/watch?v=jbc3q9bfOH8 und mitmachen Objekte: https://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into-one-in-illustrator ...

    2) Machen Sie Ihre icomoon schriftart.

    3) Bestimmen Sie Ihre "default" - Farbe in der CSS - können sagen, es ist rgb(62, 55, 60);:

    In [class^="icon-"], [class*=" icon-"] { hinzufügen

    /* default color */
color: rgb(62, 55, 60);

    entfernen und nur jede zweite Zeile Lesen

    color: rgb(62, 55, 60);

    oder explizit ändern, um

    color: inherit;

    Das ist es.

    Wenn ich nur zwei Farben (z.B. dunkelgrau und orange) korrekt angeschlossen, ich würde nie mehr als zwei Kindern in das Symbol, und ändern könnte ich das dunkelgrau aus der root-Knoten <span class="icon-myIconName"> ...

    Hier ist eine funktionierende codepen mit einer 2-Farben-schriftart mit nur einem element, wo können Sie die Farbe ändern ...

    InformationsquelleAutor sebilasse
  2. 3

    IcoMoon selbst generiert den CSS-Code für stapeln von Glyphen. Es nicht :before und :after (das ist eine gute Lösung für die 2-Farben). Stattdessen verwendet es einen eher Allgemeinen Ansatz mit mehreren spans. Es eignet sich gut für Fälle, in denen Sie mehr als eine Farbe. Alles, was Sie tun müssen ist, importieren Sie ein multicolor SVG zu IcoMoon. Es wird sich um den rest kümmern. Hier ist eine demo der Ausgabe: https://codepen.io/Keyamoon/pen/vXxJgq

    InformationsquelleAutor Keyamoon
  3. 2

    Dem Beispiel in dem link, den Sie ist ganz klar.
    Erstellen Sie 2 SVGs. Für jede der 2 Farben in dein Symbol, und fügen Sie Sie als zwei verschiedene Zeichen der schriftart. (\e006 und \e0007 im Beispiel)

    Dann verwenden Sie sowohl die :before Wähler und die :after Selektor hinzufügen, die Figuren mit verschiedenen Farben.
    Jeder Selektor ist mit einem anderen Charakter und einer anderen Farbe.

    Den letter-spacing: -1 bewirkt, dass die Zeichen überlappen.

    Nahm ich Ihre jsfiddle Beispiel, und befestigte es mit font-awesome: http://jsfiddle.net/p44zf3se/

    Update

    Ich bin nicht sicher, warum meine Vorherige Antwort war nicht genug, aber hier ist ein weiteres Beispiel.
    Ich kann nicht laden Sie es auf jsfiddle, denn die Schrift kann nicht sein, serviert von einer anderen Seite. So nehmen Sie nur die html unter + gratis-download der IcoMoon schriftart aus: http://github.com/Keyamoon/IcoMoon-Free/raw/master/Font/IcoMoon-Free.ttf

    <html>
<head>
<style>
@font-face  {
    font-family: 'IcoMoon-Free';
    src: url('IcoMoon-Free.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.facebook-icon {
    font-family: 'IcoMoon-Free';
}
.facebook-icon:after {
    content:"\ea8e";
    color:#F33;
    font-size:6em;
}
.facebook-icon:before {
    content:"\ea8c";
    color:#0C0;
    font-size:6em;
    letter-spacing:-0.5em;
} 
</style>
</head>
<body>
<div class="facebook-icon"></div>
</body>
</html>
    • ja ja ich nahm seine jsfiddle, und ich sehe, wie es funktioniert, aber ich verstehe nicht, das Verfahren auf icomoon. So wie das Beispiel, das ich sagte. Möchte ich ein facebook-Symbol. Ich speichern Sie in eine svg-die "f" und Speichere ich in einem anderen svg-hintergrund (mit der Aussparung für das "f"). Aber dann, wenn ich Sie hochladen auf icomoon, erscheinen Sie als unterschiedliche Symbole, nicht? Oder sollte ich das tun und dann, sobald ich Sie heruntergeladen haben, dass die generierten Dateien erstelle ich den "facebook" - Symbol?
    • Sie können nicht erstellen Sie multi-farbige icons Icomoon
    • Die Schrift ist eine einzige Farbe immer. Die facebook-Klasse-Stil (unter Verwendung von :before und :after) zu enthalten, 2 Briefe. jeder in einer anderen Farbe. Sie können laden Sie Ihre svgs oder Ausgang woff-Datei irgendwo und ich werde zu aktualisieren, das Beispiel, mit ihm zu arbeiten.
    InformationsquelleAutor Igal S.
  4. 0

    Lösung 1: Nicht die Verwendung einer schriftart

    Du noch nicht so viel gesagt über das, was Sie eigentlich tun. Eine Webseite zu erstellen? Eine web-Schnittstelle für Kunden-Bearbeiten Sie ein Symbol in das content-management-system von eine website? Ich vermute.

    Es klingt wie Sie über-verkompliziert die Dinge durch das denken über Schriften überhaupt. Sie sind in der Regel einfarbigen Tieren. In der Regel.

    Warum nicht einfach ein SVG? Sie können ganz einfach erstellen oder laden Sie eine in Javascript und Bearbeiten von Javascript, es gibt viele online-demos und ich habe noch eins hier. Wechsel von zwei Farben wäre ziemlich trivial, dann.

    Hier ist eine schnelle Möglichkeit zum erstellen einer SVG in eine Seite, und bieten es zum download als eigenständige Datei:

    HTML:

    <!DOCTYPE html>
<html><head>
		<title>Chess SVG Builder</title>
		<script type="text/javascript">
window.addEventListener("load", function() {
	//Draw board
		var	svg = document.getElementsByTagName("svg")[0],
			sz = Math.min(svg.clientWidth, svg.clientHeight),
			sqr = sz / 11, smSqr = sqr / 2,
			xSmO = (svg.clientWidth - sz) / 2, ySmO = (svg.clientHeight - sz) / 2,
			xO = (svg.clientWidth - 8 * sqr) / 2, yO = (svg.clientHeight - 8 * sqr) / 2;
		svg.innerHTML = "";
		for (var x = 0; x < 22; x++) for (var y = x % 2; y < 3; y += 2)
				svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
		for (var x = 0; x < 3; x++) for (var y = x % 2; y < 19; y += 2)
				svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
		for (var x = 19; x < 22; x++) for (var y = x % 2; y < 19; y += 2)
				svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
		for (var x = 0; x < 22; x++) for (var y = 20 - x % 2; y < 22; y += 2)
				svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
		for (var x = 0; x < 8; x++) for (var y = 1 - x % 2; y < 8; y += 2)
				svg.innerHTML += '<rect x="' + (xO + sqr * x) + '" y="' + (yO + sqr * y) + '" width="' + sqr + '" height="' + sqr + '" style="fill:#700;" />';
		svg.innerHTML += '<rect x="' + xO + '" y="' + yO + '" width="' + 8 * sqr + '" height="' + 8 * sqr + '" style="fill:none; stroke-width:1; stroke:#000;" />';
	//Print pieces
		svg.style.fontSize = sqr + "px";
		var	numInstances = [1, 1, 2, 2, 2, 8],
	       		horz = [4, 3, 0, 7, 2, 5, 6, 1],
	       		pieceNum = 0;
		for (var code = 12; code < 24; code++)
			for (var lp = 0; lp < numInstances[code % 6]; lp++) {
				var pN = pieceNum % 16;
				var	x = xO + sqr * (0.5 + (Math.floor(pieceNum / 8) % 2 == 0 ? horz[pieceNum % 8] : pieceNum % 8)),
					y = yO + sqr * (0.9 + 7 * (1 - Math.floor(pieceNum / 16)) - Math.floor((pieceNum % 16) / 8) * (1 - 2 * Math.floor(pieceNum / 16)));
				svg.innerHTML += '<text x="' + x + '" y="' + y + '" text-anchor="middle">&#98' + code + '</text>';
				pieceNum++;
			}
	//Make downloadable
		var	serializer = new XMLSerializer(),
			source = serializer.serializeToString(svg);
		if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/))
			source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
		if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/))
			source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
		source = '<?xml version="1.0" standalone="no"?>' + source;
		document.getElementsByTagName("a")[0].href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
});
		</script>
	</head><body>
		<svg width="550" height="550">
		</svg><br />
		<a>Download as a file</a>
</body></html>

    Wie Sie sehen können, ich hab ja eigentlich ein Interesse daran haben, den Bau von multi-farbigen Schriften. Ich möchte, dass meine Schachfiguren zu behalten Ihre semantische Bedeutung an den computer, und so habe ich 'write' mit dem Unicode-Zeichen aus 9812 ab. Und wenn Ihre Anzeige schriftart ist wie meine, wirst du sehen, monochromen Stücke mit Lücken in Ihnen; es ist ein plumper Versuch, die Simulation einer zweiten Farbe; die roten Quadrate stören das Aussehen der Stücke, und ein Schach-position wäre nicht lesbar.

    Auf meine eigenen anzeigen, die "weiße" Stücke auf roten Quadrate eigentlich gar nicht habe einen Flecken von weißen überall in Ihnen; daher ich glaube nicht, ich bin Erbsenzählerei, hier... ich denke, es ist fair zu Fragen, dass der weiße König sollte weiß sein.

    Lösung 2: Verwenden Sie eine schriftart

    Noch einen SVG zu definieren, die schriftart, aber es wird eine Menge mehr Handbuch Lesen beteiligt.

    Nicht SVG-fonts können mehrere Farben in einer einzigen Glyphe? Ich bin mir nicht sicher über die genaue Vererbung, Regeln, und das scheint für Sie relevant. Lesen und Experimentieren?

    w3c-Glyphe spec

    Wenn ich verstanden habe was ich lese, ändern Länge typisierte Werte von css kann verwirrend sein, da auf einer Glyphe definiert die Art und Weise, die Sie brauchen, wäre es eigentlich die Glyphe das lokale Koordinatensystem(?) Aber Farben sollten sicher sein.

    Vielleicht habe ich einige code-Beispiele später, Wann immer ich auf dieser mich. Ich denke, es kann bedeuten, die änderung der SVG in Javascript; ich kann mir nicht vorstellen, CSS in der Lage, um alle Farben, die solch eine individuelle schriftart. Es scheint mir, dass 'Erben' ist die Eigenschaft zu verwenden, für die eine Standard-Farbe, während die anderen Farben in der Glyphe müsste JS? Mehr hier später vielleicht, wenn ich weiß.

    InformationsquelleAutor Thomas Poole
Schreibe einen Kommentar