Hyperlink External Arrow Icon (#2)


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 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); // invert icon
  background-image: url('https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66ddf85cd4b0e965fd30d4a4/1725823068704/external_icon_2.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.


Previous
Previous

Hyperlink External Arrow Icon (#3)

Next
Next

Hyperlink External Arrow Icon (#1)