How to reference Fontawesome icons within markdown

[ottlinger]

Thanks for this great theme!

I'm trying to make use of Fontawesome icons within my markup, but am unable to get it rendered properly.

Here's what I tried so far:

<icon class="fa fa-arrow-up">
<i class="fas fa-user"></i>
<i class="fab fa-facebook"></i>
[{{<icon class="fa fa-arrow-up">}}top](/)

How can I refence/render an icon within my markdown?

Thanks

(will provide a PR to add this to the documentation once I get a hint ;))

[amalba21]

I use a separate css file with declarations (local webfonts):

.fa-github:before {
  content: "\f09b"; }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff") format("woff"); }

.icons {
  color: var(--txt-color);
  font-size: 1.4rem;
}

Example definition in my toml file:

# Social Menu
[[params.social]]
name = "blog"
icon = "fab fa-github" 
url = "https://github.com/blog..." 

In my layout file for the header.html:

{{- range $index, $key := .Site.Params.Social }}
{{- if $key.url }}
<li><a href="{{ relURL $key.url }}"><i title="{{ $key.name }}" class="icons {{ $key.icon }}"></i></a></li>

Rendered on html page:

<i title="blog" class="icons fab fa-github"></i>

[ottlinger]

@amalba21 Sry, misunderstanding - as Fontawesome is already loaded I thought I'm able to reference it in my regular markdown files.

It gets properly rendered in footers/headers, so I thought there might be a syntax to reference it in my regular content files.

I'd like to reference a PDF logo in order to have a more graphic download link.

Other templates allow referencing an icon via shortcodes, such as:
https://github.com/zjedi/hugo-scroll/blob/master/layouts/shortcodes/icon.html

[amalba21]

For references in regular posts I have to add [markup.goldmark.renderer] to my toml file:

# For usage of inline htlm e.g. iframes
[markup.goldmark.renderer]
unsafe = true

And use it like this (class="fa fa-file-pdf"):

## Raspberry Pi [Touch Display 2](https://www.raspberrypi.com/products/touch-display-2/) 5" via DSI port 
Dokumentation [page](https://www.raspberrypi.com/documentation/accessories/touch-display-2.html)
<i class="fa fa-file-pdf" style='font-size:36px;color:green'></i>
Installation [guide](https://www.raspberrypi.com/documentation/accessories/touch-display-2.html#connect-to-raspberry-pi)

See screenshot

[ottlinger]

@amalba21 would you think that a shortcode is a better alternative instead of renderingUnsafe elements? Thanks for the hint.

[amalba21]

Rendering insecure/ unsafe elements is the more pragmatic approach. But I'm also constantly torn.

[ottlinger]

@amalba21 setting the configuration option does not bring the icons. Do I need to add manual CSS files as well? Issue solved: if there's no style definition attached the icon is not rendered.

Thanks.