How to align google icons with text

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?