CODEWITHSUNDEEP
svgfont-awesome
user4963906
user4963906

Reputation:

Fontawesome5 SVG with JS in css?

I am trying to use FA5 SVG with JS in css block, but I don't seem to get it working. I search Stack overflow but I found results for CSS version but not SVG version. I added the following javascript in my head code 

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

And I used below code in my css

display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
margin-right: 5px;
font-size: 13px;
content: "\f1f8";

I am trying to add below icon https://fontawesome.com/icons/trash?style=solid

Upvotes: 2

Views: 5674

Answers (2)

luckydonald
luckydonald

Reputation: 6856

You can actually enable that in JS+SVG mode, too.

However, be warned, it will make replacement really slow.

In the recent documentation they added a hint:

Gotta enable this with SVG

If you are using SVG with JavaScript you need to enable this because it's disabled by default. Use <script data-search-pseudo-elements ... > inside your script tag.

This is described in more detail in the configuration documentation:

<head>
  <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-search-pseudo-elements></script>
  <style>
  .glasses::before {
    display: none;
    font-family: 'Font Awesome 5 Solid';
    content: "\f530";
  }
  </style>
</head>
<body>
  <span class="glasses"></span>
</body>

Valid font-family values are: "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Light", and "Font Awesome 5 Brands".



Concrete example

In my case I had a table and want those arrows to indicate sorting:

th.sort-down::after {display: none; font-family: 'Font Awesome 5 Solid'; content: "\f0dd"; /* fas fa-sort-up   */}
th.sort-up::after   {display: none; font-family: 'Font Awesome 5 Solid'; content: "\f0de"; /* fas fa-sort-down */}
th::after           {display: none; font-family: 'Font Awesome 5 Solid'; content: "\f0dc"; /* fas fa-sort */}
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-search-pseudo-elements></script>

<table border="1">
  <thead>
    <th>no sort</th>
    <th class="sort-down">sorted down</th>
    <th class="sort-up">sorted up</th>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>

That said, you might be better of (performance wise) by putting the icons into html, and use the css to display or hide it can work, too:

th.sort-up   .fa-sort      {display: none;}
th.sort-up   .fa-sort-up   {display: inline;}
th.sort-down .fa-sort      {display: none;}
th.sort-down .fa-sort-down {display: inline;}
th .fa-sort-up, th .fa-sort-down {display: none}
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-search-pseudo-elements></script>
    
<table border="1">
  <thead>
    <th>
      no sort
      <i class="fas fa-sort"></i><i class="fas fa-sort-up"></i><i class="fas fa-sort-down"></i>
    </th>
    <th class="sort-down">
      sorted down
      <i class="fas fa-sort"></i><i class="fas fa-sort-up"></i><i class="fas fa-sort-down"></i>
    </th>
    <th class="sort-up">
      sorted up
      <i class="fas fa-sort"></i><i class="fas fa-sort-up"></i><i class="fas fa-sort-down"></i>
    </th>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>

Also a viable option is to just using the "old" CSS+Fonts way instead of the javascript+SVG version.

Upvotes: 2

MBaas
MBaas

Reputation: 7530

You can't use just refer to the FA-Icons in your CSS when you want to use the SVG-Icons, that will only work when using CSS. To use SVG, you have to have references to "fas fa-trash" in our code (which the JS will then replace with the appropriate SVG)

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-trash"></i>

Upvotes: 0

Related Questions