57

D3 ノードでテキストの代わりにFontAwesomeでアイコンを設定しようとしています。これは、テキストを含む元の実装です。

g.append('svg:text')
    .attr('x', 0)
    .attr('y', 4)
    .attr('class', 'id')
    .text(function(d) { return d.label; });

そして今、私はアイコンを試してみます:

g.append('svg:i')
   .attr('x', 0)
   .attr('y', 4)
   .attr('class', 'id icon-fixed-width icon-user');

しかし、マークアップが正しく、CSS ルールが適切に適用されていても、これは機能しません。アイコンが表示されません。

理由はありますか？

ここに関連するjsbinがあります

編集

画像を挿入するためのこの代替手段を見つけました：http://bl.ocks.org/mbostock/950642

node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

これはまさに私がやりたいことですが、<i>FontAwesome で使用される要素では機能しません。

4

9 に答える 9

86

通常のテキスト要素内で適切な Unicode を使用し、次のように font-family を "FontAwesome" に設定する必要があります。

 node.append('text')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', function(d) { return d.size+'em'} )
    .text(function(d) { return '\uf118' });

この正確なコードは、「icon-smile」アイコンをレンダリングします。すべての FontAwesome アイコンの Unicode は、次の場所にあります。

http://fortawesome.github.io/Font-Awesome/cheatsheet/

チートシートのコードを HTML/CSS Unicode 形式から Javascript Unicode 形式に変更して、JavaScript&#xf118;で記述\uf118する必要があることに注意してください。

于 2013-10-15T15:23:01.393 に答える
12

私は d3 を初めて使用し<i>ますが、class 属性を使用して要素のスタイルを設定することで、font awesome が機能します。

私が見つけた唯一の方法は、a を追加しforeignObjectて、font awesome に必要な関連 HTML を設定することです。

参照：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?redirectlocale=en-US&redirectslug=SVG%2FElement%2FforeignObject

http://fortawesome.github.io/Font-Awesome/examples/

コード：

g.append('svg:foreignObject')
    .attr("width", 100)
    .attr("height", 100)
    .append("xhtml:body")
    .html('<i class="icon-fixed-width icon-user"></i>');

デモ: http://jsbin.com/eFAZABe/3/

于 2013-08-24T09:35:38.960 に答える
3

次のように使用する場合、Font awesome 4.x バージョンはサポートされません

svg.append('text')
   .attr('x', 15)
   .attr('y', -17)
   .attr('fill', 'black')
   .attr('font-family', 'FontAwesome')
   .attr('font-size', function (d) { return '20px' })
   .text(function (d) { return '\uf2b9' });

なのでこれを交換

.attr('font-family', 'FontAwesome')

と

.attr("class", "fa")

FA 4.xに役立つことを願っています

于 2020-04-30T14:08:16.050 に答える