To decorate your website using icons in iconfont, what you should do firstly is to read the documents of iconfont. And this post mainly introduces the usage of iconfont in hugo.

iconfont

Steps

First, there are lots of fancy icons that attract you in iconfont. And you can “purchase some freely for one project in your shopping cart.

To quote as Unicode, its application steps are:

  • Generate the code and click to duplicate the code. Paste them after the source code of the template in _iconfont.scss file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
@font-face {
  font-family: 'iconfont';

  src: url('../fonts/iconfont/iconfont.eot');
  src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), // not '?#iefix', because webpack will add '?hash=[hash]'
  url('../fonts/iconfont/iconfont.woff') format('woff'),
  url('../fonts/iconfont/iconfont.ttf') format('truetype'),
  url('../fonts/iconfont/iconfont.svg#iconfont') format('svg');
}

@font-face {
  font-family: 'iconfont';  /* project id 1039822 */
  src: url('//at.alicdn.com/t/font_1039822_ndzwog2io3l.eot');
  src: url('//at.alicdn.com/t/font_1039822_ndzwog2io3l.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1039822_ndzwog2io3l.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1039822_ndzwog2io3l.woff') format('woff'),
  url('//at.alicdn.com/t/font_1039822_ndzwog2io3l.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1039822_ndzwog2io3l.svg#iconfont') format('svg');
}
  • Define the style of iconfont usage.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
%base-iconfont {
  font-family: "iconfont" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-text-stroke-width: 0.2px;
  cursor: pointer;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  font-feature-settings: "liga";
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont {
  @extend %base-iconfont;
}
  • Copy the individual code of icon into pages – single.html and summary.html.
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--header in single.html-->
    <header class="post-header">
      <h1 class="post-title">{{ .Title }}</h1>

      <div class="post-meta">
        <span class="post-time"> <i class="iconfont">&#xe664;</i> {{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} </span>
        {{ with .Params.categories -}}
          <div class="post-category">
            {{ range . -}}
          &nbsp;   <i class="iconfont">&#xe68b;</i>
              <a href="{{ "categories" | relLangURL }}/{{ . | urlize }}/"> {{ . }} </a>
            {{ end -}}
          </div>
        {{- end }}
        {{- if .Site.Params.moreMeta }}
          <span class="more-meta"> &nbsp; <i class="iconfont">&#xe75c;</i> {{ T "wordCount" .WordCount }} </span>
          <span class="more-meta"> &nbsp; <i class="iconfont">&#xe686;</i> {{ T "readingTime" .ReadingTime }} </span>
        {{- end }}
        {{ if and .Site.Params.busuanzi.enable .Site.Params.busuanzi.pagePV -}}
          {{ $valueSpan := printf `<span id="busuanzi_value_page_pv"><img src="%s" alt="spinner.svg"/></span>` ("img/spinner.svg" | relURL) -}}
          <span id="busuanzi_container_page_pv" class="more-meta"> {{ printf (T "pagePV") $valueSpan | safeHTML }} </span>
        {{- end }}
      </div>
    </header>
44
45
46
47
48
49
50
51
52
53
<!--footer in single.html-->
    <footer class="post-footer">
      {{ with .Params.tags -}}
        <div class="post-tags">
          {{ range . -}}
            <i class="iconfont">&#xe8c4;</i>
            <a href="{{ "tags" | relLangURL }}/{{ . | urlize }}/">{{ . }}</a>
          {{ end -}}
        </div>
      {{- end -}}

Pay Attention!

  • If your template has been updated, you may check out what we discussed has been modified.

  • If you change the icons in your project, you are supposed to change @font-face in your _iconfont.scss file and rebuild your website.

Thanks

Thanks for the help of warmhearted yixuju! Without his help, I cannot decorate my website with many cute icons.

Index