External link logo on menu item

[imtdb]

Hi everyone. I am wondering how can I add this type of external link logo to my menu.

This is the blog from where the screenshot is from: https://arduin.io/

And this is my blog: https://tadeodonegana.com/ There i am trying to apply the logo to the CV and LinkeIn menu entries.

Thanks in advance.

[Arif]

You can use the pre or post key to add the icon to your menu, e.g.

[[menu.main]]
  name = 'Services'
  url = 'https://lorem.ipsum.com'
  weight = 30
  pre = '<i class="fa-solid fa-code"></i>'

Then in your menu code, just add the code {{ .Pre }} or {{ .Post }} inside the menu range, e.g.

{{- range site.Menus.main }}
  <a href="{{ .URL }}">
    {{ .Name }} <span class="">{{ .Pre }}</span>
  </a>
{{- end }}

[imtdb]

Thanks for the answer @Arif . I have the following code on my header.html file:

{{- range .Site.Menus.main }}
            {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
            {{- $page_url:= $currentPage.Permalink | absLangURL }}
            {{- $is_search := eq ($.Site.GetPage .KeyName).Layout `search` }}
            <li>
                <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
                {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
                    <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
                        {{- .Pre }}
                        {{- .Name -}}
                        {{ .Post -}}
                    </span>
                </a>
            </li>
            {{- end }}

I am supposed to delete the existing code, or where should i add the snippet you gave me?

Thanks in advance!

[Arif]

pre is for before the menu item and post is for after. So, I think you need the post key. post = '<i class="fa-solid fa-code"></i>' then {{ .Post }}. This example uses Fontawesome icons, but you can use other icons or even SVG. Don’t delete your code. Just test it as it is first and see if it works (though you don’t need to use pre if you don’t intend to have icons before the menu).

[imtdb]

@Arif

post = ‘’

Thanks again @Arif. I have added the html code like this on my .toml file:

[[languages.en.menu.main]]
identifier = "linkedin"
name = "LinkedIn"
url = "https://www.linkedin.com"
post = '<i class="fa-solid fa-code"></i>'

But i am still unable to see the external link logo, any idea?

[Arif]

@imtdb

But i am still unable to see the external link logo, any idea?

You need to call the Fontawesome CDN inside your head.html file, e.g

<!-- FontAwesome <https://fontawesome.com/> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" />

[imtdb]

@Arif

https://fontawesome.com/

Thanks!