Font awesome 5 (SVG) with AngularJS
Question
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.
3 answers
solution1
2 2018-02-07 18:08:21
You can still use the old style Web Fonts in FontAwesome 5.
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>
solution2
0 2018-01-10 06:38:50
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.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>
solution3
0 2021-04-27 09:09:37
It seems Font Awesome SVG icons has no support for AngularJS and for Angular < v5 : https://github.com/FortAwesome/angular-fontawesome
It's really bad since icons won't update when model changes :-(
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.