In-line icons in unordered list break the list

support
1

I have a problem with using unordered bullet lists with an in-line (fontawesome) icon. Using the icon in an ordered list within the tabs environment breaks the list.

So, this works as expected:

- {{< fa question-circle >}} This is a test.

But this doesn’t:


{{< tabs "Week-One" >}}
{{< tab "9.14" >}}

### Course orientation

- Item one
- Item two
- {{< fa question-circle  >}} This is a test.

{{< /tab >}}

Visual example of what happens:

Screenshot from 2020-07-18 12-54-43
Screenshot from 2020-07-18 12-54-43506×521 21.8 KB

My shortcode:

<!-- Load fontawesome only once per page -->
{{ if not (.Page.Scratch.Get "fontawesomeLoaded") }}
  {{ .Page.Scratch.Set "fontawesomeLoaded" true }}
  <script defer src="/css/all.js"></script>
{{ end }}
<i class="fas {{ range $element := .Params }} fa-{{ $element }} {{ end }}"></i>
2

Help!

3

it looks like the whitespaces ruins the HTML output.
add - dash for each {{ and }} delimiter below:

<!-- Load fontawesome only once per page -->
++ {{- if not (.Page.Scratch.Get "fontawesomeLoaded") -}}
++  {{- .Page.Scratch.Set "fontawesomeLoaded" true -}}
  <script defer src="/css/all.js"></script>
++ {{- end -}}
<i class="fas {{ range $element := .Params }} fa-{{ $element }} {{ end }}"></i>

My advices, better put the <script> injection outside the shortcodes. You can use .HasShortcode method: