Hyperlink External Arrow Icon (#3)

Bookmark Plugin

---

Plugin Details

Add an arrow icon next to a text hyperlink to let visitors know it is an external link.

Compatibility

• Works with Squarespace 7.1

• Uses Custom CSS

• Arrow Icon Included

---

Add to Custom CSS

// HYPERLINK ARROW ICON (#3) - 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); // invert icon
  background-image: url('https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66ddf85e81259571daae561c/1725823070523/external_icon_3.png'); // icon file
  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;
}

---

Apply Icon To Hyperlink

To assign the icon to a hyperlink, bold the hyperlink text in editing.

By default, the plugin applies to paragraph hyperlinks. If you want to apply to a header hyperlink instead, replace ‘p’ with one of the header options:

• Header 1 - h1

• Header 2 - h2

• Header 3 - h3

• Header 4 - h4

The plugin will only apply when the hyperlink is set to bold, so don’t forget that.

---

Customizable Options

• Icon Width

• Icon Height

• Left Spacing

• Right Spacing

• Invert (Black or White)

• Default Icon URL

• Hyperlink Font Weight

Notes

No plugin notes

Use Your Own Icon

Use CSS > Manage Files to upload and generate a file URL for your own icon. Then swap out the default icon’s URL with your file’s URL.

---