Creating custom icon using CSS


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:

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:

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:

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