CODEWITHSUNDEEP
htmlcssamp-html
Mavia
Mavia

Reputation: 71

link font-awsome to amp pages

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Shop App</title>
  <style amp-custom>

  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>  
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

i am new in amp i want to use font awsome in my site but when i add the link its show me error can any one suggest me how to add font-awsome link in amp.

this is how i add font awsome link but its not working and giving validation error any help would be wonderful

Upvotes: 4

Views: 7819

Answers (3)

raoabdullah07
raoabdullah07

Reputation: 357

The following origins are whitelisted and allowed for font serving via link tags:

https://use.fontawesome.com

  1. Using @font-face

Alternatively, you can use @font-face within your Google AMP stylesheet:

<style amp-custom>
  @font-face {
    font-family: "FontAwesome";
    src: url("https://somedomain.org/fonts/fontawesome-webfont.ttf");
  }
  body {
    font-family: "FontAwesome";
    content="";
  }
</style>

Upvotes: 0

Nisarg
Nisarg

Reputation: 367

Add this tag in "head" tag, and use it's classes in your AMP page.(It is valid on AMP pages)

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

for more details you can see this by AMPproject.org: https://www.ampproject.org/docs/design/responsive/custom_fonts

Upvotes: 8

Anisley SV
Anisley SV

Reputation: 21

For future reference please add the specific type of error message you are receiving, so you will get a faster and more effective answer. To work with amp I linked font awesome before my amp style tags. Like this: 

<link rel="stylesheet" href="css/font-awesome.min.css">
<style amp-custom>...</style>
<script type="application/ld+json">...</script>
<style amp-boilerplate>body...</style>

You also would like to double check how are you referencing font awesome. This is an example of how I do it:

<a href="https://www.linkedin.com/in/user" target="_blank"><i class="fa fa-linkedin"></i></a>

Hope it helps!

Upvotes: 2

Related Questions