Font-Awesome Class with Multiple Different Icons

Font-awesome class with multiple different icons

Yes you create a custom font awesome class, with multiple characters in content like this

.class:after {
   content: "\f005\f005\f005"; /* 3 Stars */
    font-family: FontAwesome;
}

Demo

Note that the values like \f005 etc can be found in FontAwesome stylesheet so copy the unicode of the type of font you like and use it in the content property with the font family of Font Awesome.

stack multiple font awesome icons

I think your mistake is using "nth-of-type(3n+3)" code cause I didn't find anything like this also

   <span class="fa-stack fa">
  <i class="fa fa-heart fa-stack-1x"></i>
  <i class="fa fa-heart-o fa-stack"></i>
  <i class="fa fa-heart-o fa-stack"></i>
    </span>

you used same class fa-stack for container and inner elements I find out this solution it's still need to be improve but I beleive you will get the idea

<div class="fa-stack">
  <i class="fa fa-heart"></i>
  <i class="fa fa-heart-o"></i>
  <i class="fa fa-heart-o"></i>
</div>

this is html code I used div insted of span and deleted unnecesarry classes

.fa-stack {
  position: relative;
  width: 100%;
  height: 50px;
}
.fa-stack i:first-child {
  position: absolute;
  left: 20px;
  top: 15px;
}

.fa-stack i:nth-child(2) {
  position: absolute;
  top: 10px;
  left: 23px;
}
.fa-stack i:nth-child(3) {
  position: absolute;
  top: 6px;
  left: 26px;
}

and this is the css code I used position to change place of each heart how I want also in fa-class you can change font size etc and give icons % position instead of px this is the result

Add multiple icons and space in Font Awesome with css content

Yes, it's possible. You can either use non-break unicode character \00a0.

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.icon-demo:before {  font-family: 'FontAwesome';  content: "\f1b9\00a0\00a0\00a0\f1b8";}

<span class="icon-demo"></span>

Have Two Font Awesome Icons in One i Tag

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).

Font Awesome add multiple icons to button

Just add them in separate spans: Example

<span class="fa fa-exclamation-triangle"></span>
<span class="fa fa-bar-chart"></span>
<br>
<span class="fa fa-bolt"></span>
<span class="fa fa-ban"></span>

can I use 2 different classes for the same icon?

You can add as many classes as you want to any element. To customise one of the Font Awesome icons, you can simply add another class after the existing classes - each class is separated by a space, so the icons actually have two classes already - .fab and .fa-facebook-messenger.

<i class="fab fa-facebook-messenger my-class"></i>

How to use class binding with font-awesome icon?

I switched to angular-fontawesome and it seems to be working with that.
ngClass does not work with @fortawesome/fontawesome-free@5.9.0 correctly because the <i> dom is replaced with an <svg> dom.
Here's the link to the github issue.

---

Related Topics