Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent svg translation of fontawesome

I have en issue with angular and font awesome. On first generation of list of icons suddenly all css class based icons are translated to svg. It affects only solid icons. for example :

<i class="fas fa-2x fa-minus-square"></i>

is translated somehow to

<svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x"
 ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square"
 role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
    <path fill="currentColor"
      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z">
    </path>
</svg>
<!-- <i _ngcontent-c16="" class="fas fa-2x fa-minus-square" ng-reflect-ng-class="fas fa-2x fa-minus-square"></i> -->

Is there any option which can prevent this situation? Force somehow translation?

It can be problematic. For example I cannot use solid icons :(

like image 820
Paweł Domański Avatar asked Apr 23 '18 14:04

Paweł Domański


People also ask

Is SVG better than font awesome?

One major advantage of SVG icons over Icon fonts is their superior accessibility. SVGs are armed with built in semantic elements – like < title > and < desc > that makes it accessible to screen reader and text browsers. Unlike icon fonts, SVGs are treated as an image and not as a text.

What is difference between FA and FAS in font awesome?

fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular.

How do I add SVG to font awesome?

File | Open fontawesome-webfont. svg. File | Import. Scroll to the bottom, Right Click on Icon | Glyph Info.


2 Answers

If you'd like Font Awesome not to automatically replace <i> tags that look like icons with the corresponding <svg>s, you could change the configuration to disable autoReplaceSvg.

If you're loading via <script> tag, that might look like this (make sure to do the config before loading Font Awesome):

  <head>
    <script type="text/javascript">
      // Notice how this gets configured before we load Font Awesome
      window.FontAwesomeConfig = { autoReplaceSvg: false }
    </script>
    <script src="fontawesome.js"></script>
    <script src="fa-solid.js"></script>
  </head>

Or if you're building your own bundle and can access the config from within your own script you could do this:

import fontawesome from '@fortawesome/fontawesome'

fontawesome.config = { autoReplaceSvg: false }
like image 130
mwilkerson Avatar answered Oct 17 '22 00:10

mwilkerson


I had the same issue, the icon tag was actually translated to SVG when I inspected the element.

The problem was I was loading fontawesome both via CSS and JS calls. When I removed the call to the JS lib and only called the CSS file, the icons rendered properly.

like image 22
S.Simeonov Avatar answered Oct 16 '22 23:10

S.Simeonov