i
is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheet you will see...
.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"; }
But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example f040
to:
<g><text x="0" y="0"></text></g>
And then in your stylesheet add:
svg text {
font-family: FontAwesome;
}
According to Niek's comment, if you use the free version of Font Awesome 5+, you must use the following font-family declaration:
svg text {
font-family: 'Font Awesome 5 Free';
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…