sootsnoot Posted June 2, 2023 Posted June 2, 2023 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 sootsnoot Posted June 3, 2023 Author Solution Posted June 3, 2023 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. sarawhite 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment