admin管理员组文章数量:1430224
I'm using font awesome version 5, with AngularJS. It's looking great, and it's replacing icons as expected. However, the problem i'm having is if a dom element is added AFTER the page has finished loading, it doesn't know to replace the relevant .fa-* element, with an SVG.
Surely there is a way around this, but I can't seem to find any information on this specific issue.
I'm using font awesome version 5, with AngularJS. It's looking great, and it's replacing icons as expected. However, the problem i'm having is if a dom element is added AFTER the page has finished loading, it doesn't know to replace the relevant .fa-* element, with an SVG.
Surely there is a way around this, but I can't seem to find any information on this specific issue.
Share Improve this question asked Jan 10, 2018 at 5:23 DallbyDallby 5964 silver badges20 bronze badges 4- Add something from your code what you saying about. – Hanif Commented Jan 10, 2018 at 5:27
- @Hanif adding code isn't really going to explain this? I can't add code to show you... – Dallby Commented Jan 10, 2018 at 5:31
- Which version of angular you using there? If above Angular2 and you adding under main page not ponent wise then should not a issue. – Hanif Commented Jan 10, 2018 at 5:34
- @Hanif I'm using AngularJS.... Angular 1.4 – Dallby Commented Jan 10, 2018 at 5:44
3 Answers
Reset to default 2You can still use the old style Web Fonts in FontAwesome 5.
https://fontawesome./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>
In general, in order to show svg as a pseudo-element, you can either use an svg image as a background or content. Both cases are in the snippet below.
For the other question, how to extend a specific fonts awesome to show svg instead. We can do the same as above in addition to the use of the css specificity. See i.fa.fa-clipboard, which shows a different svg image instead of the one defined in fonts awesome.
p1:before {
font-family: 'FontAwesome';
content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3%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%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/wikipedia/mons/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./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>It seems Font Awesome SVG icons has no support for AngularJS and for Angular < v5 : https://github./FortAwesome/angular-fontawesome
It's really bad since icons won't update when model changes :-(
本文标签： javascriptFont awesome 5 (SVG) with AngularJSStack Overflow
版权声明：本文标题：javascript - Font awesome 5 (SVG) with AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745465352a2659509.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论