I am trying to use Font Awesome with Petite Vue. As it is a lightweight version of Vue with no build step, I cannot use the Font Awesome Vue Component.
I am using a Font Awesome Pro Kit (web fonts to avoid CORS issues) and importing Font Awesome and Petite Vue in a <script> tag.
However, when inside a v-for loop, I cannot get the Font Awesome icon to display.
<i class="fa fa-thin fa-{{ item.icon }}"></i>
It works fine outside the v-for loop, even if still inside a v-scope tag and hard-coding an icon name works too. It also works as expected if not using Petite Vue.
I managed to get this working by using v-effect to dynamically add the icon name class.
<i class="fa fa-thin" v-effect="$el.classList.add('fa-' + item.icon)"></i>
Related
I have recently tried adding an icon from Font Awesome 5 to a UWP project I'm working on. After failing to get the icon I want to show in the app, I tried simplifying things by getting the icon to show in a simple test app, still with no success. All I did to create the test app was:
In Visual Studio, create a new Windows Universal Blank App.
Added the Font Awesome OTF font file.
Assets
Fonts
Font Awesome 5 Free-Solid-900.otf
Modified MainPage.xaml (following instructions provided by Microsoft) like so:
<Grid>
<FontIcon FontFamily="Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" FontWeight="Black" Glyph="" />
</Grid>
When I run the test app, all I see where the icon should be is a square box. According to the icon's page, the solid version I'm trying to use is in the free version of the font and I have correctly set the font weight to match the configuration of the font family.
Other things I've tried:
Different paths for the Font Family:
Font Awesome 5 Free Solid
/Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid
ms-appx:///Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid
Different minimum version on the UWP project configuration.
Different version of Visual Studio. I am using Visual Studio 2017 for my (real) app because it has certain legacy requirements. Couldn't get this font thing to work in Visual Studio 2019 either.
Different font character. I tried the alternate accessibility symbol provided by Font Awesome which, according to its information page, is in the Font Awesome 5 Brands-Regular-400.otf font file. And yes, for this case I did reset the font weight to Normal (400).
A different control. Tried using a TextBlock instead of FontIcon with same settings (Font Family, Font Weight, Text instead of Glyph, etc.)
Nothing has worked; I have never seen any of the Font Awesome icons I've tried to use appear in my app, every time showing the square box. Is there anything else I haven't tried?
You may be using the wrong font name.
Font Awesome 5 Free-Solid-900.otf Its real font name is not Font Awesome 5 Free Solid, but Font Awesome 5 Free, please use the following code：
FontFamily="/Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free"
In addition, please make sure your font file's Build Action (right-click the file, choose Properties) is Content, it can guarantee that your font file will be added into the package correctly.
Best regards.
I can't import line-awesome framework and use its icons in vue.js application.
I have tried to add the CDN link in my html file as mentioned here.
When adding it, and trying to use its icons like
<i class="la la-home"></i>
the webpage showing nothing, but when using
<i class="fa fa-home"></i>
instead, the webpage show the font-awesome home icon, however I am still importing the CDN of line-awesome.
The documentation is very unclear as you figured out. There are actually two CDN-links on the how-to page, even if they look identical.
The first CDN-link at time of writing is actually just a drop-in for FontAwesome and does not define any styling with the .la-prefix. To use that, you need to define your icons as found in the FontAwesome documentation. Things should work just fine if you use <i class="fa fa-home"></i> like you figured out.
The second CDN-link defines all the .la-styling and none of the .fa-styling. If you include that link, you can actually use the documentation to include their icons.
I have a wordpress site and I installed the shortcode plugin.
I am trying to install a button and I put an icon on it.
When I load my site here you can see it under the slider, the button that says photo gallery
http://denverkollel.org/site/
it's on the blue background. You see there is a space , but no icon showing.
I have the font-awesome css on the page. what else might I be missing to make it work?
You are using the older verion of Font-Awesome and that doesn't suppot fa fa-video-camera.
Actually, it doesn't even support fa class.. Initially Font-awesone used to have classes starting with .icon-.
Download a new version and make required changes.
I'm using font-awesome in my website, and I'm getting the wrong icon for Foursquare brand.
I'm using this html:
<i class="fa fa-foursquare"></i>
And this is the css content, according to fontawesom.css:
.fa-foursquare:before{content:"\f180"}
which is correct, according to the official Font Awesome website.
Everything seems to be ok, but instead of the Foursquare logo, I'm getting this icon:
Any ideas?
That icon appears to be http://iconsetc.com/icon/social-media_foursquare/?style=simple-black.
My guess is that you have a different font-based icon set loaded on your document which has the \f180 character mapped as this icon instead, overriding the Font Awesome fa-foursquare icon.
A simple fix for this would be to:
Ensure your icon is using the 'Font Awesome' font;
Remove your other icon font, or;
Ensure Font Awesome is loaded after your other icon font.
Maybe you are looking into old doc for 3.X version
This is the icon in 4.3 version: http://fortawesome.github.io/Font-Awesome/icon/foursquare/
and this for 3.2: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/foursquare/
Remember that Foursquare is a brand icon: https://playfoursquare.s3.amazonaws.com/press/foursquare-brandguide.pdf
I am trying to embed font awesome icons in select option.
I tried with <i> as well as but both are not working.
If any body has it's solution please guide on the same