Clever Geek Handbook

Displaying font icons inside svg

How can I display the font icon in svg-snipet? I tried the following, but it doesn't work:

<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <rect x="0" y="0" width="100" height="100" fill="red" ></rect>
  <text x="30" y="30" font-family="FontAwesome" font-size="20" fill="blue" >&#xf042;</text>
</g>
</svg>

Unicode &#xf042;

matches the fa-adjust icon found here . Also, how can I get unicode from an icon name?

+3


source to share


2 answers


Your stylesheet should declare the font family

svg text {
   font-family: FontAwesome;
   font-size:20px;
   background-color:blue;
}


Html

<text x="30" y="30">&#xf042;</text>
+2


source


Your code should work, assuming you are inserting the css font correctly into your document. I literally pasted your code into a fiddle and included the latest fontawesome via CDN and it worked: http://jsfiddle.net/mayacoda/o59uak50/

For the second part, I'm going to assume that you want to be able to just type the name of the icon without having to search for every unicode. Given that I do not know the context for this, I also assume that you are using javascript, and the useful form for this function would be an object with key-value pairs (name: "unicode").

You can run this script on the cheatsheet page, it will validate the elements on the page and return an object with key value pairs like so:



{
 "fa-adjust": "&#xf042;"
 ...
}

Run the script in the console.

(function () {
    var unicode = {};

    $('.fa').each(function() {
        var code = $(this).siblings().text().match(/\[(.*)\]/);
        code = code ? code[1] : '';

        var name = $(this).parent()[0].innerText.match(/\b(.*)\[/);
        if (!name || !name[1]) {
            return;
        }

        name = name[1].trim();
        unicode[name] = code;
    });

    return unicode;
})();
+1


source






More articles:


All Articles