Ich habe ein svg, die Bilder enthält:Wie füge ich ein font awesome icon in meine svg ein?

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>

Wie ersetze ich diese Zeile w/a font ehrfürchtigen Symbol:

<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>

scheint nicht wie das Bild zeigt nicht zu arbeiten oben.

Quelle

2013-02-20 Marissa Levy

Sie müssen die Glyphe bekommen h Elemente aus der Svg. – David

i ist nicht gültig SVG. Sie müssen das tatsächliche Zeichen einschließen, das das Symbol anzeigt. Wenn Sie einen Blick auf font awesome's stylesheet nehmen, werden Sie sehen ...

.icon-group:before    { content: "\f0c0"; } 
.icon-link:before     { content: "\f0c1"; } 
.icon-cloud:before    { content: "\f0c2"; } 
.icon-beaker:before    { content: "\f0c3"; } 
.icon-cut:before     { content: "\f0c4"; } 
.icon-copy:before     { content: "\f0c5"; } 
.icon-paper-clip:before   { content: "\f0c6"; } 
.icon-save:before     { content: "\f0c7"; } 
.icon-sign-blank:before   { content: "\f0c8"; } 
.icon-reorder:before    { content: "\f0c9"; } 
.icon-list-ul:before    { content: "\f0ca"; } 
.icon-list-ol:before    { content: "\f0cb"; } 
.icon-strikethrough:before  { content: "\f0cc"; } 
.icon-underline:before   { content: "\f0cd"; } 
.icon-table:before    { content: "\f0ce"; }

Aber das sind Unicode-Zeichen für CSS verschlüsselt. In SVG müssen Sie die Syntax Beispiel \f040 ändern:

in Ihrem Stylesheet

<g><text x="0" y="0">&#xf040;</text></g>

Und dann hinzu:

svg text { 
    font-family: FontAwesome; 
}

Quelle

2013-02-20 17:41:43 Duopixel

funktioniert perfekt. Danke! –

@Duopixel Diese Lösung funktioniert nur, wenn die Svg Teil der Website ist, wo FontAwesome (css) geladen ist, oder? Gibt es eine Möglichkeit, eine einzelne Schriftart in eine "Stand-Alone" -SVG-Datei einzuschließen? Diese Datei sollte "offline" lesbar sein, ohne dass die CSS-Dateien vom Webserver geladen werden müssen. Wie ein Bündel: Svg und FontAwesome Definition in eine Svg-Datei. –

Um ein eigenständiges SVG mit der eingebetteten Schriftart zu haben, müssen Sie die Schriftart als Daten-URI einbetten. Wenn Sie die Details benötigen, öffnen Sie bitte eine neue Frage. – Duopixel

my Demo

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    </head> 
    <body> 
    <div title="Code: 0xe800" class="the-icons span3"> 

     <H3>Standard using:</H3> 
    <i class="fa fa-camera-retro fa-4x"></i> 
    <br> 
     <H3>SVG using:</H3> 
    </body> 
</html>

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", 250) 
    .attr("height", 250); 

svg.append("text") 
    .attr("x",0) 
    .attr("y",70) 
    .attr("font-family","FontAwesome") 
    .attr('font-size', function(d) { return '70px';}) 
    .text(function(d) { return '\uf083'; });

Quelle

2015-01-23 04:54:32 WebBrother

Danke für das Beispiel mit der Funktion (d) {return '\ uf083'; }, brauchte eine Weile, um diese Lösung zu finden. – NPC

Wenn ich versuche, diese Svg mit window.btoa zu speichern, erhalte ich einen Fehler ** Uncaught DOMException: Fehler beim Ausführen von 'btoa' auf 'Window': Die zu codierende Zeichenfolge enthält Zeichen außerhalb des Latin1-Bereichs. (...) * * – Jerry

Danke, aber ich frage mich, was ist der Unterschied zwischen der Verwendung von HTML-Entity und D3js 'text' -Funktion zum Hinzufügen von String zu einem HTML-Element? wie '\ uf083' und & # xf083 – Allen

Wie füge ich ein font awesome icon in meine svg ein?

Antwort

my Demo

Verwandte Themen