Can't edit empty text or custom html block

I’d like to be able to add icons on circle backgrounds so I added fontawesome as a custom font and pasted in a link to the stylesheet in the custom code area. However, once I pasted the following into a div or text block …

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

…I can’t then edit the contents as the text block or div has no height and is hard to select. The icon does appear if I preview the site. Is there another / better way to achieve this?

UPDATE:

I also tried adding a custom HTML element (embed under widgets) but can’t see way to edit this once I have hit save and close.

Hi @codecowboy, I would try using an HTML Embed widget for custom html like that. You can give the html embed widget a class and then set it’s width and height. When using custom code, that will not show on your site until after publish, provided the fontawesome link sources are valid and the html markup is valid.

Cheers, Dave

HI @codecowboy, @dave is right - the embed widget is probably your best option. Here’s some more info on this: Custom code in head and body tags | Webflow University