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

Instantly Highlight External Links with a Subtle Icon

Want to signal that a link goes to another site? This plugin adds a clean arrow icon next to any bolded hyperlink, giving users a visual cue that they’re leaving your website.

This is a great UX improvement for blogs, portfolios, and any site with outbound resources.

---

Plugin Overview

• Platform: Squarespace 7.1

• Style Trigger: Bolded hyperlinks

• Effect: Displays an arrow icon next to the link

• Setup: CSS-only (no JavaScript or third-party tools)

• Icon Type: External arrow – Style #2

---

Installation Instructions

Paste the following CSS code into your site under
Design > Custom CSS:

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

p a strong:after {
  width: 18px; /* icon width */
  height: 18px; /* icon height */
  margin-left: 5px; /* left spacing */
  margin-right: 2px; /* right spacing */
  filter: invert(0); /* black icon (invert: 1 for white) */
  background-image: url('https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66ddf85cd4b0e965fd30d4a4/1725823068704/external_icon_2.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

• In Squarespace’s text editor, bold any hyperlink.

• The arrow icon automatically appears next to the link.

• Only affects <p> paragraph links unless modified (see below).

To use the icon with headers, replace p with:

css
h1, h2, h3, h4

---

Customizable Options

Option	Description
Icon Size	Adjust width and height values
Left/Right Margin	Control spacing around the icon
Icon Color	Use filter: invert(1) for white icons
Font Weight	Keeps bolded links visually consistent
Icon URL	Replace with your own image if desired

---

Upload Your Own Icon (Optional)

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

2. Upload your custom icon image

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

---

Need Help Setting It Up or Want It Customized?

Want to make the icon appear on all links, not just bold ones? Or use a different style? I can help with that — quickly and affordably.

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