Add External Link Icon to Bold Hyperlinks in Squarespace (Style #1)

Upgrade Link Visibility with a Clean External Icon

Make your external hyperlinks stand out and improve UX with this simple, stylish plugin. When you bold a link, an external arrow icon appears—subtly signaling users that the link leads off-site.

This is Plugin Style #1, featuring a slightly larger and bolder arrow icon.

---

Plugin Overview

• Platform: Squarespace 7.1

• Style Trigger: Bolded hyperlinks

• Effect: Displays arrow icon next to the link

• Setup: Pure CSS (no JavaScript required)

• Icon Type: External arrow – Style #1

---

How to Install the Plugin

Paste the following CSS into your site’s
Design > Custom CSS area:

css
// HYPERLINK EXTERNAL ICON (#1) - BOLD THE HYPERLINK TEXT TO APPLY THE ICON - GHOSTPLUGINS.COM //

p a strong:after {
  width: 22px; /* icon width */
  height: 22px; /* icon height */
  margin-left: 5px; /* left spacing */
  margin-right: 2px; /* right spacing */
  filter: invert(0); /* black icon */
  background-image: url('https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66ddf85adf3d191e7f46c6ed/1725823066971/external_icon_1.png');
  display: inline-block;
  background-size: contain;
  content: "";
  vertical-align: middle;
}

// HYPERLINK - CHANGE BOLD LINK BACK TO NORMAL FONT WEIGHT - GHOSTPLUGINS.COM //

p a strong {
  font-weight: normal;
}

---

How It Works

• Bold any hyperlink inside a text block.

• The external icon appears to the right of the link.

• Applies only to paragraph text (<p>).
  To use with headers, change p to:

  css
  h1, h2, h3, h4
  

---

Customization Options

Option	Description
Icon Width/Height	Adjust width and height values
Spacing	Use margin-left and margin-right
Color Invert	Use filter: invert(1) for a white icon
Icon URL	Swap with your own icon if preferred
Font Weight	Keeps bold text visually balanced

---

Upload a Custom Icon (Optional)

You can use your own SVG or PNG file:

1. Navigate to Design > Custom CSS > Manage Custom Files

2. Upload your icon image

3. Copy its URL and replace the default in the background-image: line

---

Need Help Adding or Customizing This?

Want it to apply sitewide or on all links instead of just bold ones? I offer quick customization and plugin help for Squarespace.

📞 Chat on WhatsApp: https://wa.me/+8801717691382
📅 Book a free consultation: https://calendly.com/website_consultation/meeting
🌐 Browse my Squarespace portfolio: https://www.squarespacewebexpert.com