带有AngularJS的字体真棒5（SVG）
Posted
技术标签:
【中文标题】带有AngularJS的字体真棒5（SVG）【英文标题】：Font awesome 5 (SVG) with AngularJS 【发布时间】：2018-06-19 05:33:36 【问题描述】：我正在使用带有 AngularJS 的字体真棒版本 5。它看起来很棒，并且正在按预期替换图标。但是，我遇到的问题是，如果在页面加载完成后添加了 dom 元素，它不知道用 SVG 替换相关的 .fa-* 元素。
当然有办法解决这个问题，但我似乎找不到关于这个特定问题的任何信息。
【问题讨论】：
从你的代码中添加你所说的内容。 @Hanif 添加代码真的不能解释这一点吗？我无法添加代码向您展示... 你在那里使用哪个版本的角度？如果在 Angular2 以上并且您在主页下添加不是明智的组件，那么应该不是问题。 @Hanif 我正在使用 AngularJS.... Angular 1.4 【参考方案1】：Font Awesome SVG 图标似乎不支持 AngularJS 和 Angular https://github.com/FortAwesome/angular-fontawesome
这真的很糟糕，因为模型更改时图标不会更新:-(
【讨论】：
【参考方案2】：您仍然可以在 FontAwesome 5 中使用旧式 Web 字体。
https://fontawesome.com/get-started/web-fonts-with-css
<head>
<!--core first + styles last-->
<link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>
<body>
<!--user icon in two different styles-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!--brand icon-->
<i class="fab fa-github-square"></i>
</body>
【讨论】：
更新链接：fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/…【参考方案3】：一般来说，为了将 svg 显示为伪元素，您可以使用 svg 图像作为背景或内容。两种情况都在下面的sn-p中。
对于另一个问题，如何扩展特定字体真棒以显示 svg。除了使用css specificity 之外，我们还可以执行与上述相同的操作。请参阅 i.fa.fa-clipboard，它显示了不同的 svg 图像，而不是 fonts awesome 中定义的图像。
p1:before
font-family: 'FontAwesome';
content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
padding: 0 5px 0 15px;
p2,
i.fa.fa-clipboard
content: ' ';
background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/fa/Globe.svg');
display: block;
content: ' ';
background-size: 28px 28px;
height: 28px;
width: 28px;
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<p1>Svg By Content</p1><br>
<p2></p2><br>
<i class="fa fa-chain-broken">Normal Icon</i><br>
<i class="fa fa-clipboard">Extended Icon</i><br>【讨论】：
感谢您的回复，但是，我正在开发的 Angular 应用程序非常强大。我真的负担不起在初始页面加载后加载的每个图标实例，并将它们替换为伪元素。我还不如回滚到 4.7 版本并将它们加载为 css 图标字体。以上是关于带有AngularJS的字体真棒5（SVG）的主要内容，如果未能解决你的问题，请参考以下文章