Jump to content

How to align google icons with text

Go to solution Solved by sootsnoot,

Recommended Posts

Posted

Just playing with the free trial. I'm familiar with WordPress and using php/css/html directly. My friend wants to use some google font icons inline with text on her squarespace site. Following this tutorial it's easy enough to put the link to the stylesheet in the head with Settings->Developer Tools->Code Injection, and add custom css with refinements to the styling. Then to actually add an icon, I need to add a code block and paste in a span. This works fine, except that although I can overlap the two blocks, I can't position the code block relative to the existing text block to make the contents line up the way I'd like. It seems the blocks always snap to grid positions.

I thought maybe I could just take the text and put it in its own <span> in the code block, and then use padding-top on the google font span to lower the icon, but that doesn't work quite right, either, it seems the padding affects both of the spans.

Any suggestions?

  • Solution
Posted

Answering my own question, looks like this can most easily be accomplished for my particular case simply by adding style="position:relative; top:4px; left:28px;"  to the <span> for the icon, and then positioning the code block for the icon aligned at the top with the text block, but overlapping the right edge of the text block with the left edge of the code block a full "snap" inside the right edge of the text block. The exact values of top and left  need to be determined empirically, depending on the icon and the custom css used for it.

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.