1

I am trying to embed a font awesome icon inside svg circles via unicode values from the font awesome website inside <text>, but they fail to appear:

enter image description here

for some reason which I don't understand, when I am using this unicode value(&#x2713) it does appear(but it's not the icon I need):

enter image description here

Some code:

from the react component:

       <g>
            <circle className="circle test-circle"
                key={index}
                cx={xScale(node.x)}
                cy={yScale(node.y)}
                r={node.r}
                fill={node.done === true ? colour : "grey"}
            />
            {node.done === true ? 
                <text id="chk" style={{fontFamily:'Font Awesome'}} x={xScale(node.x)-10} y={yScale(node.y)+10}>&#xf00c;</text>
                :
                <text id="chk" style={{fontFamily:'Font Awesome'}} x={xScale(node.x)-10} y={yScale(node.y)+10}>&#xf00c;</text>
            }

        </g>

from the scss:

text#chk {
    font-family: 'Font Awesome';
    content: "\f00c";
    font-size: 30px; 
}

What can cause this?

ClovisIRex
  • 43
  • 1
  • 9
  • I am sorry for a dummy comment, but may be you use cdn with an old fontawesome lib, or fonts there doesn't have it. Try to save the document with the code in unicode encoding too. – Сергей Илларионов Jul 20 '19 at 22:52
  • All I did was downloading react-fontawesome npm packages. How do I use newer fa cdn's? – ClovisIRex Jul 20 '19 at 22:54
  • I am new to React. Instead of NPM package (probably it doesn't have new icons) try to import files directly from the fontawesome's CDN or download it and import manually from fontawesome.io (it is an archive with css and fonts, so just import them to your project and use, may be it will help) – Сергей Илларионов Jul 20 '19 at 22:57
  • I think you haven't import ```font-awesome.css``` or ```font-awesome.scss``` into your project. – Tien Duong Jul 21 '19 at 00:33
  • @TienDuong I don't even have access to it, it does not come with the npm packages. how do I import it manually? – ClovisIRex Jul 21 '19 at 07:24
  • What is your fontawesome version? – Tien Duong Jul 21 '19 at 07:28
  • @TienDuong 4.7.0. I tried to include the cdn URL in `index.html` and also import it on `index.js` after downloading another npm package. didn't work – ClovisIRex Jul 21 '19 at 08:45

1 Answers1

0

I found out the problem, font family is font-family='fontawesome' and not 'Font Awesome'

ClovisIRex
  • 43
  • 1
  • 9