External Link Icon css?

[DannyTomCom]

I have searched and cannot find an answer.
Does bootstrap already have CSS for appending an external link icon after the link text?
Something like ..
bi bi-box-arrow-up-right
but have it show up after the link text and not before?
I currently have class="nav-link link-dark px-2 bi bi-box-arrow-up-right" but I want the arrow, after, not before...

[DannyTomCom]

Well, I am not sure if this is the best way, but I went ahead and made another stylesheet with the following.... just need to tweak the look so its properly formatted...

.external-link::after,
[class^="external-"]::after,
[class*=" external-"]::after {
  display: inline-block;
  font-display: block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight:600 !important;
  font-variant: normal;

  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    content: "\f1c5";
}

[mdo]

This is pretty much right. You also don't have to load the whole font library, unless you're already doing that elsewhere. You could do this with an inline or CSS-embedded SVG if you wanted.

[coliff]

I wrote a little thing about this exact issue with using the Bootstrap external link icon as a CSS-embedded SVG.
https://christianoliff.com/blog/styling-external-links-with-an-icon-in-css/

You can set it to only show the icon on external links automatically with something like this too:

a[href^="http"]::after
{
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

[DannyTomCom]

Thank you for that and I will look into it deeper after my comptia studies today.. you can see how I implemented the external icon on my own site at https://1st.dannytom.com/

[willdhorn]

Thanks @coliff! Great writeup in your blog post. I had a question about where you said:

One gotcha is that images which are links have the icon appended which isn’t ideal. Unfortunately I don’t have an easy CSS-only fix for that. The :has() CSS relational pseudo-class would be perfect, but browser support is unfortunately nonexistent.

Since :has() is now "newly available", how would you implement it? Like a:not(:has(img))::after {...}?

[patkon]

Maybe
a[href^="http"]:not([href*="yourdomain.com"]):not(:has(img))::after { ... }