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