# External link logo on menu item

**URL:** <https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292>\
**Category:** support\
**Tags:** menu\
**Created:** [May 9, 2023, 9:21pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292 "2023-05-09T21:21:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![imtdb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/imtdb/32/19109_2.png) [@imtdb](https://discourse.gohugo.io/u/imtdb)\
**Post date:** [May 9, 2023, 9:21pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/1 "2023-05-09T21:21:42Z")

</div>

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

![Screenshot 2023-05-09 at 18.19.09](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/d/b/dbf1b44bfc63bca58cd9adc96aebe34d73d2f7cb.png)

This is the blog from where the screenshot is from: [https://arduin.io/](https://arduin.io/)

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

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [May 9, 2023, 9:32pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/2 "2023-05-09T21:32:12Z")

</div>

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

```auto
[[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.

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

```

---

<div class="post-metadata">

**Author:** ![imtdb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/imtdb/32/19109_2.png) [@imtdb](https://discourse.gohugo.io/u/imtdb)\
**Post date:** [May 10, 2023, 2:01am UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/3 "2023-05-10T02:01:37Z")

</div>

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

```auto
{{- 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!

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [May 10, 2023, 6:17am UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/4 "2023-05-10T06:17:16Z")

</div>

`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).

---

<div class="post-metadata">

**Author:** ![imtdb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/imtdb/32/19109_2.png) [@imtdb](https://discourse.gohugo.io/u/imtdb)\
**Post date:** [May 10, 2023, 12:54pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/5 "2023-05-10T12:54:54Z")

</div>

> [@Arif](#):
>
> post = ‘’

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

```auto
[[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?

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [May 10, 2023, 1:43pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/6 "2023-05-10T13:43:17Z")

</div>

> [@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

```auto
<!-- 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" />

```

---

<div class="post-metadata">

**Author:** ![imtdb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/imtdb/32/19109_2.png) [@imtdb](https://discourse.gohugo.io/u/imtdb)\
**Post date:** [May 10, 2023, 5:31pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/7 "2023-05-10T17:31:13Z")

</div>

> [@Arif](#):
>
> `https://fontawesome.com/`

Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [May 12, 2023, 5:31pm UTC](https://discourse.gohugo.io/t/external-link-logo-on-menu-item/44292/8 "2023-05-12T17:31:52Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.