Creating custom icon using CSS

Hi,

I’m customizing the Houzez theme for my client and I need an icon that would provide additional information to the visitor on hover. Here’s the web page:

https://antetomas.com/cimerman-nekretnine/property/zemljiste-s-vilom-povise-britanskog-trga/

I wanted to import the Font Awesome icons, so I followed the instructions on the link below and tried to add the code in the theme’s functions.php file, but the icon was not displayed on the page:

https://www.wpbeginner.com/wp-themes/how-to-easily-add-icon-fonts-in-your-wordpress-theme/

Then I realized that info icon is just a letter “i” with a circle around it, so I tried to use the following HTML/CSS code to create it:

https://jsfiddle.net/anteto/gqoyt3w8/4/

However, I cannot get the perfect circle and cannot vertical-align it to the middle.

Thanks,

Ante