css - que - ¿Cómo incluyo un icono impresionante de fuente en mi svg?
que es font awesome (2)
Tengo un svg que incluye imágenes:
<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>
¿Cómo puedo reemplazar esa línea con un icono impresionante de fuente?
<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>
no parece funcionar ya que la imagen no aparece.
mi 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>
JS
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''; });
No soy un SVG válido. Debe incluir el personaje real que muestra el ícono. Si echas un vistazo a la hoja de estilos de font awesome, verás ...
.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"; }
Pero esos son caracteres unicode codificados para CSS. En SVG necesitarías cambiar la sintaxis del ejemplo /f040 a:
<g><text x="0" y="0"></text></g>
Y luego en tu hoja de estilo agrega:
svg text {
font-family: FontAwesome;
}