Use Social Icons in MarkDown

[istvnurbn]

Hi!

As the template has social icons located in the svg.html file it would be great to use them in a post, inline with text.

How is it possible?

[plutonium-239]

i am also looking for this
@istvnurbn have you figured something out yet?

[istvnurbn]

Not really 🙁

[Morgenkaff]

It could probably be done with a shortcode.
I have copied the code for the social icons on the profile home page, and added this to the header of single.html for some specific posts (hardcoded to the rss icon, but it should be easy to change):

<div class="social-icons-post">
  <a href="{{ "" | absLangURL }}/index.xml" target="_blank" rel="noopener noreferrer me" title="Subscribe to posts - RSS">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 11a9 9 0 0 1 9 9"></path>
    <path d="M4 4a16 16 0 0 1 16 16"></path>
    <circle cx="5" cy="19" r="1"></circle>
  </svg>
  </a>
</div>

Maybe it can help?

[ErikKalkoken]

I found a solution. You can create a shortcode that renders the socials and use that in your markdown

Step 1: Define the social icons in the config under

(same syntax as for profile mode):

params:
  socialIcons:
    - name: "<platform>"
      url: "<link>"
    - name: "<platform 2>"
      url: "<link2>"

Step 2: Create the shortcode

layouts/shortcodes/socials.html

<div class="social-icons">
    {{- range site.Params.socialIcons }}
    <a href="{{ trim .url ' ' | safeURL }}" style="box-shadow:none" target="_blank" rel="noopener noreferrer me"
        title="{{ (.title | default .name) | title }}">
        {{ partial "svg.html" . }}
    </a>
    {{- end }}
</div>

Step 3: Use the shortcode

Include the shortcode in your markdown:

{{< socials >}}

You can see an example in action here: Erik's blog

Note

For more information please see Create your own shortcodes