Recent searches
Search options
Administered by:
As you might know, our website https://zero-iee.com is a static web site generated by Hugo.
We want to use symbols such as a check mark on our pages in the future. The easiest way to do this is to use the appropriate UTF-8 character code in our texts.
Unfortunately, however, web browsers display the symbols differently - the Edge browser on Windows, for example, displays them in purple (dark mode) and Firefox onUbuntu in gray. This does not always match our color scheme.
That's why we came up with a workaround for Hugo that simply replaces all UTF-8 checkmarks with an SVG graphic and replaces them in the text of the page ($content).
![Template Code for Hugo:
<div class="container" style="padding-top:15rem; color: white;">
{{/* Replace UTF8 check symbols with SVG for uniform look */}}
{{ $checkIconUrl := (print .Site.BaseURL "img/checkbox.svg") }}
{{ $content := replace .Content "✔️" (printf "<img class=\"check\" src=\"%v\">" $checkIconUrl) }}
{{ $content | markdownify }}
</div>](https://files.techhub.social/media_attachments/files/112/693/099/551/144/428/original/d633b06c8de8bfd5.png "Template Code for Hugo:
<div class=\"container\" style=\"padding-top:15rem; color: white;\">
{{/* Replace UTF8 check symbols with SVG for uniform look */}}
{{ $checkIconUrl := (print .Site.BaseURL \"img/checkbox.svg\") }}
{{ $content := replace .Content \"✔️\" (printf \"<img class=\\"check\\" src=\\"%v\\">\" $checkIconUrl) }}
{{ $content | markdownify }}
</div>")
@zeroiee That's clever, but you may want to add an alt attribute for accessibility
