Rotating Text with an Icon or Image

Written By Paul Reeves

How to Add Rotating Text with an Icon or Image to a Squarespace 7.1 Page

A rotating text effect can add a fun engaging and interactive element to your Squarespace site. Combined with a centred icon or image, you can create a unique visual feature that highlights important information or branding. This guide will walk you through how to add a rotating text circle with a customizable icon or image to a Squarespace 7.1 page.

Whether you’re a seasoned developer or a novice user, don’t worry… this guide is beginner-friendly and flexible for customizations. Let’s get started!

Difficulty Level

  • Beginner: 5/10 (You’ll need to copy and paste code into different areas and adjust URLs.)

  • Intermediate: 3/10 (You can make adjustments to the styling and functionality easily.)

  • Expert: 1/10 (This should be straightforward and quick.)

Step 1: Set Up Font Awesome for Icons

To use Font Awesome icons, you need to add the Font Awesome library to your Squarespace site. This will provide access to thousands of icons.

  1. Add Font Awesome to Your Site:

    • Navigate to Pages > Website Tools > Code Injection in Squarespace.

    • Paste the following link into the Header Code Injection field.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Note: We suggest Font Awesome for setting up icons across your website but there are other providers out there like Google Icons (Click Here for Google Icons). You will need to make some small adjustemenst to the Plugin Code for these to work.

Step 2: Add the Rotating Text Container with Font Awesome Icon

This step adds the rotating text container and sets up a Font Awesome icon at its center.

1. Go to the Page Editor:

  • In Squarespace, open the page where you want the Rotating Text with an Icon or Image.

  • Click Edit on any section.

2. Add a Code Block:

  • Scroll down to where you want to place your code and click + Add Block.

  • Choose the Code block (it looks like a small </> symbol).

  • Insert the HTML: Highlight for placement: Paste the provided HTML into the Code Block.

3. Insert the HTML Code:

  • Copy and paste the following HTML into the code block:


<div class="circle-text-container" 
     data-font-size="20" 
     data-speed="8s" 
     data-text="Rotating Text is Awesome! *" 
     data-url="https://example.com" 
     data-fa-icon="fa-star">
  <div class="center-icon"></div>
  <svg class="circle-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path 
      id="circlePath" 
      d="M 100,100 m -50, 0 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0" 
      fill="none"></path>
    <text>
      <textPath xlink:href="#circlePath" startOffset="50%" text-anchor="middle"></textPath>
    </text>
  </svg>
</div>

This HTML Code give you the ability to customise elements of your rotating text, what it does and what it links to. Make sure that you make the edits that you need to in this section to match your brand.

What These Attributes Do:

data-text: Specifies the rotating text. Replace this with your desired text, such as “Welcome to My Site! *”.

data-url: Makes the rotating text clickable. Replace this with any URL you want to link to.

data-fa-icon: Specifies the Font Awesome icon. Replace fa-star with the desired icon class from Font Awesome (e.g., fa-heart).

Step 3: Add CSS for Styling

Now that the structure is in place, you’ll need to style the rotating text and the centered Font Awesome icon.

  1. Open the Custom CSS Editor:

    • Navigate to Pages > Website Tools > Custom CSS in Squarespace.

  2. Insert the CSS:

    • Copy and paste the following CSS into the Custom CSS editor.


/* Rotating Text with Font Awesome Icon */
.circle-text-container {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  position: relative;
}

.circle-svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%; /* Ensure proper rotation center */
  transform-box: fill-box;
  animation: spin 8s linear infinite;
  position: absolute; /* Align SVG within the container */
  top: 0;
  left: 0;
}

/* Keyframes for rotation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pause animation on hover */
.circle-svg:hover {
  animation-play-state: paused;
}

/* Center Font Awesome Icon Styling */
.center-icon {
  position: absolute; /* Positioned relative to the container */
  top: 50%; /* Align to center vertically */
  left: 50%; /* Align to center horizontally */
  transform: translate(-50%, -50%); /* Adjust for true center */
  font-size: 24px; /* Adjust size of the icon */
  color: currentColor; /* Match text color */
  z-index: 2; /* Ensure it stays above the SVG text */
  pointer-events: none; /* Prevent interaction with the icon */
}

/* Ensure text inherits the site's default font */
.circle-text-container text {
  font: inherit; /* Inherit the font from the site styles */
  fill: currentColor; /* Use the default text color */
}

/* Ensure clickable links in the SVG inherit styles */
.circle-text-container text a {
  fill: currentColor; /* Use the inherited font color */
  text-decoration: none; /* Remove underline completely */
  cursor: pointer; /* Indicate the text is clickable */
}

.circle-text-container text a:hover {
  text-decoration: none; /* Ensure no underline appears on hover */
}

Step 4: Add JavaScript for Functionality

To enable the rotation and dynamic content handling, add JavaScript to your site.

  1. Access Code Injection Editor:

    • Go to Pages > Website Tools > Code Injection.

  2. Insert the JavaScript:

    • Paste the following JavaScript into the Footer Code Injection section.


<script>
// Rotating text with icon or image
document.querySelectorAll('.circle-text-container').forEach(container => {
    const fontSize = container.getAttribute('data-font-size') || 17;
    const speed = container.getAttribute('data-speed') || '8s';
    const text = container.getAttribute('data-text') || 'Default text *';
    const url = container.getAttribute('data-url') || '#'; // Default to '#' if no URL provided
    const faIcon = container.getAttribute('data-fa-icon'); // Font Awesome icon class
    const imageUrl = container.getAttribute('data-image-url'); // Custom image URL

    // Set SVG animation speed
    const svg = container.querySelector('.circle-svg');
    svg.style.animationDuration = speed;

    // Set rotating text content
    const textPath = container.querySelector('textPath');
    textPath.textContent = text;

    const textElement = container.querySelector('text');
    textElement.style.fontSize = `${fontSize}px`;

    // Wrap the textPath content with an anchor tag
    const link = document.createElementNS("http://www.w3.org/2000/svg", "a");
    link.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", url);
    link.setAttribute("target", "_blank"); // Open in new tab
    link.setAttribute("rel", "noopener noreferrer"); // Security for external links
    link.appendChild(textPath.cloneNode(true));

    // Replace the textPath with the anchor-wrapped version
    textElement.innerHTML = '';
    textElement.appendChild(link);

    // Set or update the center icon or image
    const centerIcon = container.querySelector('.center-icon');
    if (centerIcon) {
        if (imageUrl) {
            // Use the image if `data-image-url` is provided
            centerIcon.innerHTML = `<img src="${imageUrl}" alt="Center Image" style="max-width: 50px; max-height: 50px;">`;
        } else if (faIcon) {
            // Use Font Awesome icon if `data-fa-icon` is provided
            centerIcon.innerHTML = `<i class="fa ${faIcon}" aria-hidden="true"></i>`;
        } else {
            // Fallback to a default Font Awesome icon if neither is provided
            centerIcon.innerHTML = `<i class="fa fa-circle" aria-hidden="true"></i>`;
        }
    }
});
</script>

Step 5: Use an Image Instead of an Icon (Optional)

If you’d prefer to use a custom image instead like your company logo instead of an icon, you can do that with a small change.

Update the Code Block HTML (See step 2):

  1. In your Code Block, replace the data-fa-icon attribute with data-image-url.

  2. Add the URL of your image, such as https://example.com/your-image.png.

You Did It!

Congratulations on adding your rotating text feature to your Squarespace site! Whether you went with a Font Awesome icon or a custom image, you’ve just created an engaging design element that’s sure to grab attention. It’s all about those little touches that make your site stand out, and you nailed it.

Remember, experiment with the text, try different icons, or even swap in some creative images to make it truly your own. If you ever get stuck or need a helping hand, we’re just an email away at letstalk@usual.ie. Happy customizing!

Paul Reeves https://usual.ie
Next

Before and After Image Slider