Jump to content

Animate icons on load using a code block

Recommended Posts

Posted (edited)


I have a code block with the following HTML to display an icon:

<span class="material-icons-outlined-blue">call</span>

And CSS to style the icon:

.material-icons-outlined-blue {
  font-family: 'Material Icons Outlined';
  font-weight: 100;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  color: #000840;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  padding-left: 0.1 em;


However, when the page loads the icons do not animate like the text and images on the page. I guess this is because its a code block, and the Squarespace animation is not being applied.

How can I get the code block to animate on page load, so that it works the same as the Squarespace elements?

URL: https://orb-robin-wn9f.squarespace.com/locations

Password: 1ndigo


Edited by CJoose
Link to comment
  • CJoose changed the title to Animate icons on load using a code block
  • Replies 0
  • Views 290
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.