CSS to disable icons to the right of external links?

Anyone know how or if it’s possible to apply custom CSS to remove the “external” icon to the right of external links? (shown below)

image

1 Like

In case you want to try and find out how to customize this while someone answers, I recommend looking at Getting comfortable with Obsidian CSS.

For within Obsidian itself, try

.external-link {
  background-image: none;
  padding-right: 0px;
}

The first line turns off the image. The second line removes that space that was created to hold it.

5 Likes

@dcb Thank you - that worked! And thank you @argentum for those links. I need to spend some time digging into CSS and using DevTools, and this is going to be helpful.

Thanks for the help! The gap was driving me crazy, especially since I couldn’t remove it.

Jerry

How would I proceed if I want to create custom link icons that indicate certain websites or media like Wikipedia, a photo, a video etc?

I tried writing this snippet, but that did not work.

.external-link[href*='wikipedia.org']:after {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent, transparent), url(https://cdn-icons-png.flaticon.com/512/48/48930.png?w=1380&t=st=1664985197~exp=1664985797~hmac=1daae3a8c920f3bf1bbd7680ae17c3773f10793eebf1d9551d5f1f2687dcfb58);
    background-size: 13px;
    padding-right: 16px;
    background-position-y: 4px;
    cursor: pointer;
}

@kartmann I do something like this, encode image as inline svg to avoid fetching from network all the time

Not sure if there is a better way…

.markdown-preview-view a[href*="wikipedia.org"] {
  background-position: center right;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 141.26 141.26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h141.26v141.26h-141.26z' fill='%23e6e6e6'/%3E%3Cpath d='m103.62 31v2.14a13 13 0 0 0 -6.4 2.66 24.37 24.37 0 0 0 -6.13 8.67l-32.69 66.72h-2.18l-32.81-67.58a24.34 24.34 0 0 0 -4.23-6.36 10.3 10.3 0 0 0 -3.62-2.8 17 17 0 0 0 -5.78-1.3v-2.15h31.92v2.14c-3.68.35-5.44 1-6.53 1.85a4.19 4.19 0 0 0 -1.65 3.41c0 1.93.9 4.93 2.7 9l24.24 46 23.69-45.4c1.84-4.47 3.37-7.58 3.37-9.31a4.35 4.35 0 0 0 -1.71-3.21 8.91 8.91 0 0 0 -5.12-2.17l-1-.17v-2.14z'/%3E%3Cpath d='m131.73 31v2.14a13 13 0 0 0 -6.4 2.66 24.37 24.37 0 0 0 -6.13 8.67l-28.69 66.72h-2.17l-30.34-67.58a24.08 24.08 0 0 0 -4.23-6.36 10.26 10.26 0 0 0 -3.61-2.8 13.24 13.24 0 0 0 -5.16-1.3v-2.15h31.31v2.14c-3.68.35-5.44 1-6.53 1.85a4.19 4.19 0 0 0 -1.65 3.41c0 1.93.9 4.93 2.71 9l21.73 46 19.69-45.4c1.84-4.47 3.37-7.58 3.37-9.31a4.37 4.37 0 0 0 -1.7-3.21q-1.71-1.53-5.76-2.17l-1-.17v-2.14z'/%3E%3C/svg%3E");
  background-size: 14px;
  padding-right: 17px;
  padding-bottom: 3px;
}
1 Like

Thanks @luckman212! How do I get the code snppet to work in Lve Preview too?

Sorry, I took a look and—no idea. When inspecting the links in live preview mode, it doesn’t look like the URLs are exposed anywhere. Unless it’s just been a long day and I’m not seeing them. I don’t use Live Preview myself so I’ll let someone else chime in if they know how to do it…

1 Like