Basically I'm trying to use two icons:
<i class="fas fa-heart"></i> Solid heart icon
<i class="far fa-heart"></i> Regular heart icon (outlined)
The first one I got with the following code:
<FontAwesomeIcon icon={faHeart} />
How can I get the second one?
After some reading in the react-fontawesome docs I figured out how to do outlined icons.
For the first one I need the package #fortawesome/free-solid-svg-icons
Then I need to import the icons as the following:
import { faHeart, faTrash } from '#fortawesome/free-solid-svg-icons'
The second one, I need the package #fortawesome/free-regular-svg-icons
Then I just import the following.
import { faHeart as farHeart } from '#fortawesome/free-regular-svg-icons'
That's it!
Related
In FontAwesome there is a "bookmark" icon.
As you can see, they are both named "bookmark". But how do I choose between one and the other?
Thanks!
Both have different classes 1st icon is something like <i class="fas fa-bookmark"></i> but for 2nd icon class is something like <i class="far fa-bookmark"></i>.
you need to pick from fas for solid, far for regular, fal for light, or fab for a brand.
How should Font Awesome be used with Vue? I have vue-fontawesome added to my project, as well as Bulma, so am I supposed to intermix the two? Or choose one or the other? I would like to be able to use Bulma's classes for coloring the icons.
Vue-fontawesome shows using this syntax:
<font-awesome-icon icon="address-card" />
and Bulma shows using this syntax:
<span class="icon">
<i class="fas fa-home"></i>
</span>
Questions:
If I am supposed to intermix the two, how should the html syntax look?
If I can only choose one or the other, what would be the limitations of each?
<font-awesome-icon> is just a convenience component. When you check your resulting HTML, you will find it renders <i class="fas fa-home"></i>.
The above statement is of course really simplified. In my projects I am using the SVG icons, so <font-awesome-icon> will render as <svg>...</svg>.
Bulma's HTML provides a container to put an arbitrary icon into it. That can be Font Awesome, but it can also be something else. It just provides the layout.
With that in mind, I would answer your questions:
Just put the icon (Font Awesome) into the container (Bulma)
<span class="icon">
<font-awesome-icon icon="address-card" />
</span>
To color the icon, Bulma's helpers work just fine:
<span class="icon has-text-danger">
<font-awesome-icon icon="exclamation" />
</span>
Does not apply, since both of them serve different purposes and complement each other.
Install Font Awesome package
npm install --save #fortawesome/fontawesome-free
Then load its CSS files
import '#fortawesome/fontawesome-free/css/all.min.css'
Example loading it globally
// Vue.js 3
import { createApp } from 'vue'
import App from './App.vue'
import "bulma/bulma.sass"
import '#fortawesome/fontawesome-free/css/all.min.css'
createApp(App).mount('#app')
Its is an Vue 3 example, but should work the same way on Vue 2 apps if the same steps are followed.
After spending hours going around in circles. I've reached a level of frustration where I need an outside perspective.
See this code here and how it produces exactly what should be expected.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<p class="fa fa-check-circle fa_custom"> Verified</p>
<i class="fa fa-check"></i>
Then if I enter this code within a Shopify liquid file.
The output is this:
Why isn't one of the icons showing?
I've made this demonstration to highlight my problem. I'm experiencing this with a few other font awesome icons as well. I'm designing pages in HTML / CSS in sublime. Then when I take this code into a Shopify store. The icons can't be seen. I've replicated this problem in multiple stores.
It's very strange. Can someone please help me.
You have the first icon inside a p-statement.
Maybe one of your CSS-files is changing the font.
Tried this one?
<i class="fa fa-check-circle fa_custom"></i> Verified <i class="fa fa-check"></i>
I've been scouring the web, and I can't find an answer to this. Is there away to add two Font Awesome icons in one i tag?
I can do it if I put two i tags side by side, like this:
Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i>
So is there anyway to do this?
Glyph-based fonts like this generally function by changing the content of the element to a specific value, which the font picks up and renders as the appropriate glyph.
So it's unlikely that you'll be able to use a single tag to display both of them unless the library provides specific syntax for handling that behavior on it's own (similar to how Font Awesome uses stacking).
This is not possible in a single <i> tag, reason is the way how the glyph identifying classes are applied. For longer or dynamic sequences you can however directly use the icons codes in markup notation:
html: <span class="font-awesome"></span>
css: .font-awesome { font-family: FontAwesome; }
This obviously requires that you load the font as FontAwesome.
I created a fiddler as simple demonstration: https://jsfiddle.net/6ofmn36g/
I do agree though that this is an approach that is somewhat hard to read, though...
With Font Awesome 5, it's possible!
Masking
Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.
Go through the Masking section in this link.
The below snippet is a small working example taken from their site
<!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file -->
<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>
Not possible with current library of FontAwesome. But there are work arounds as arkascha has suggested below.
Additional Info:
Not exactly what you are asking for But I think this will help you, Also future crowd who falls into this thread with the title.
I had answered similar stuff... Here
https://stackoverflow.com/a/36491858/2592042
You can also build a custom icon by using set of icons available in the font-awesome icon set by stacking and aligning them accordingly. Stacked Icons
Example:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-male fa-stack-1x"></i>
<i class="fa fa-female fa-stack"></i>
</span>
I am using Awesome Font in my web project. Is there any option how to make shortcut to bunch of icons? E.g. I have circle-thin icon. Now on page I want to put three icons together so the result is OOO, but I do not want to put 3x times <i class="fa fa-circle-thin"></i> s in the code. So can I somehow create CSS shortcut when I write it, 3 circles will appear?
Example:
.circle-three {
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
}
Then on page I would use only .circle_three class instead of typing the code for circle three times.
It is possible by both
adding a new class and creating a rule that inherits everything and only adds the changes you want to, and
by creating a brand new class that will substitute the original one completely.
Since the only attribute in the FontAwesome CSS for fa-circle-thin is the content of the before pseudo-element, and hence there is nothing else to inherit, in this case both solutions (appended class or new class ) have the same behavior / meaning.
.fa-circle-thin.triple::before {
content: "\f1db\f1db\f1db";
}
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Standard : <i class="fa fa-circle-thin"></i>
Triple : <i class="fa fa-circle-thin triple"></i>
If you check the CSS file included with Font Awesome, you'll find this rule:
.fa-circle-thin:before {
content: "\f1db";
}
So, you can make a similar rule to achieve what you want:
.fa-circle-three:before {
content: "\f1db \f1db \f1db";
}
Check this pen for an working example.