分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 使用svg中没有外部文件的FontAwesome图标，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我需要创建一个SVG(带有 PHP和/或 Javascript),其中一些SVG元素是 FontAwesome中的图标,但是没有外部依赖关系(如：导入css文件等).

我发现了 this stackoverflow问题,这是一个类似的主题,但不符合我的问题,因为有外部依赖关系,例如在显示svg的网页上添加FontAwesome(CSS文件).

不同的是,我需要一个一体化SVG,其中所有必需的FontAwesome定义都是svg的一部分,因为用户应该能够下载生成的SVG,以使用svg查看器或编辑器继续使用它.

有没有办法把(例如)一个“Font Awesome”图标的定义放在一个svg中？

我发现了 this(可能)svg信息列表.所以看起来像图标路径可用作SVG代码.那么我可以在svg中使用这个？

//更新：我发现以下示例,但我不知道,如何包含FontAwesome定义以及如何访问图标:-(

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
          units-per-em="1000" cap-height="600" x-height="400"
          ascent="700" descent="300"
          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
      <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>

解决方法

你的例子是一个SVG字体,它不适用于IE或Firefox.您需要将FontAwesome编码为数据URI,并将其嵌入@ font-face,如果您希望它在任何地方工作：

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">  
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'FontAwesome';
          src: url(data:font/opentype;base64,[...]) format('opentype');
        }
      </style>
    </defs>
    <rect x="0" y="0" height="100" width="500" fill="#eee" />
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32">
      &#xf007
    </text>
  </svg>

将[…]替换为base64编码版本的字体.您可以将.ttf或.otf文件上传到base64服务或命令行openssl base64 -in< infile> -out< outfile&gt ;. 如果要将FontAwesome的库子集,您可以前往icomoon http://icomoon.io/app/#library并添加FontAwesome库.然后选择所需的图标,下载zip,然后将ttf上传到base64编码服务(如此http://www.opinionatedgeek.com/dotnet/tools/base64encode/),并将生成的字符串粘贴到src：font-face声明中.