How to use icons in my project?

support
1

below my code prints.

GET http://localhost:1313/icons-font/icofont.woff2 **net::ERR_ABORTED 404 (Not Found)**

{{ $iconsFont := resources.Get "icons-font/icofont.css" | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $iconsFont.RelPermalink  }}">

this is my structure

assets
|-- icons-font
____|--- icofont.woff
____|--- icofont.woff2
____|--- icofont.css

This is my icofont.css

@font-face {
  font-family: "IcoFont";
  font-weight: normal;
  font-style: "Regular";
  src: url("icofont.woff2") format("woff2"), 
       url("icofont.woff") format("woff");
} ...

I’ve tried to use this and it also doesn’t work

@font-face {
      font-family: "IcoFont";
      font-weight: normal;
      font-style: "Regular";
      src: url("./icofont.woff2") format("woff2"), 
           url("./icofont.woff") format("woff");
    }
2

What is the issue you are facing? It is not very clear what you are asking.

1 Like
3

move icons-font directory to static/icons-font

assets

Stores all the files which need be processed by Hugo Pipes. Only the files whose .Permalink or .RelPermalink are used will be published to the public directory. Note: assets directory is not created by default.

1 Like
4

I would not compile these parts of the stylesheet every time you create your site. Put the fonts in the static folder and then add your finished stylesheet to your build process. The assets folder does not get copied over to your site.

@font-face {
  font-family: "IcoFont";
  font-weight: normal;
  font-style: "Regular";
  src: url("/path/to/icofont.woff2") format("woff2"), 
       url("/path/to/icofont.woff") format("woff");
}
1 Like
5

This working, thanks man

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.