-1

I am having trouble in using Fontawesome CDN. It changes all the <i> tags into <svg>. Is there a way we can prevent this?

Example:

<i class="fa fa-user"></i>

Changes into 

<svg class="svg-inline--fa fa-user fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 0c88.366 0 160 71.634 160 160s-71.634 160-160 160S96 248.366 96 160 167.634 0 256 0zm183.283 333.821l-71.313-17.828c-74.923 53.89-165.738 41.864-223.94 0l-71.313 17.828C29.981 344.505 0 382.903 0 426.955V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48v-37.045c0-44.052-29.981-82.45-72.717-93.134z"></path></svg>
halfer
  • 19,824
  • 17
  • 99
  • 186
kamran shah
  • 117
  • 4
  • 16
  • 1
    Don't embed the JavaScript from https://fontawesome.com/get-started/svg-with-js, but the Stylesheet from https://fontawesome.com/get-started/web-fonts-with-css instead ...? – CBroe Mar 11 '18 at 11:11
  • can u place it as an answer so that i can mark it please – kamran shah Mar 11 '18 at 11:22
  • Side note on the terminology - a content delivery network (CDN) **provides assets** (e.g. scripts, stylesheets, images...) and does not replace or modify your code. A script you are embedding **from** the cdn might change your site/code, however. So a more accurate title would have been "fontawesome cdn **script** renders svg" – Christian Aug 27 '22 at 17:42

1 Answers1

-1

I think you've taken the wrong cdn.

here is the CSS cdn : 

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

You've probably used the javascript CDN which replace with 

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
kevinniel
  • 1,088
  • 1
  • 6
  • 14
  • i just added the 'aria-hidden' but it had no effect – kamran shah Mar 11 '18 at 11:04
  • _"The only way to prevent it is to add a data-attribute in your tag"_ - which data attribute? `aria-hidden` is not a data attribute. And it doesn't prevent this behavior; what you are referring to is in the section [Accessibility (Web Font with CSS)](https://fontawesome.com/how-to-use/accessibility#web-font-accessibility), and explains that you have to add this attribute _manually_ to preserve accessibility, if you are using the webfont-only version of FA. – CBroe Mar 11 '18 at 11:09
  • i read the link that u mentioned. it only tells if one wants to add some text as title. The problem which i am facing is all the '' tags converts to '' tags when rendered. If we are on the same track then can you kindly show me an example of it please – kamran shah Mar 11 '18 at 11:20