CSS to disable icons to the right of external links?

Custom CSS & Theme Design
,
1

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

2 Likes
2

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.

1 Like
3

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.

13 Likes
4

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

5

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

Jerry

6

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;
}
7

@anon70334931 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
8

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

9

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