To use the new free Font Awesome 6, you can again use the CDN (if that’s your preference) like the following. <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css”> Then, use icons in your HTML as follows. <i class=”fa-solid fa-house”></i>
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 { … Read more
This is because the tick is inline content so when the text wraps it will continue to flow as usual. You can stop this behaviour by taking advantage of text-indent: The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. … Read more
Don’t add font-awesome resources to aurelia.json – you’d need font files too, which Aurelia don’t process. Instead, take the following steps. First, if you added anything for font-awesome already to your aurelia.json file, remove it again. Add new file prepare-font-awesome.js in folder \aurelia_project\tasks and insert the below code. It copies font-awesome resource files to output … Read more
If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version First, you only need to include the CSS file of Font Awesome 5 either in the head tag using: <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”> Or within the CSS file: @import url(“https://use.fontawesome.com/releases/v5.13.0/css/all.css”) Then you need to correct the … Read more
First, download Font Awesome, extract the ZIP file and copy fonts/fontawesome-webfont.ttf into a Fonts folder in your solution. Set the Build Action in the properties to Resource if it isn’t already Next, add a Style to the Resources in App.xaml. Don’t forget the # at the front of the font name and remember to use … Read more
Use event.currentTarget which is always the object listening for the event; event.target is the actual target that received the event which is not what you want in this case since it could be the icon. With event.currentTarget if the user clicks on the icon, it’ll bubble the event up to the object listener which is … Read more
You can fix it in webkit with: -webkit-text-stroke: 1px background-color;