How to replace the FontAwesome logo with the image and vice versa

This tutorial is going to reveal a secret of choosing a perfect logo for your website – either an icon or the image. Let’s learn how to change it up to your needs!

We will consider 2 situations:

1. Your site logo is set with an image, and you prefer to have an icon instead.
2. The logo is set with the font icon by default, and you want to change it to your business logo image.

1. Changing image to an icon

1. Open your website in any browser, right-click the logo and choose ‘Inspect’ in a drop-down. You will see a line that says something similar to:
2. Now, connect to your FTP or open the File Manager at your hosting cPanel.
3. Open the HTML file of your page (e.g., index.html file) and locate the line you inspected previously. Replace it with the following one if you’d like to use the FontAwesome icon:

   Here fa fa-phone are the classes that indicate an icon you’re setting instead of an image. You may check the full list of the icons available at the following link: http://fontawesome.io/icons/

4. The additional ‘icon-logo’ class is added for your convenience, it allows changing the design of the logo icon. For example, you can open the style.css file located in css folder and paste this rule to the bottom:
5. You may manage the appearance of the icon logo this way – feel free to change its color, size or background by adjusting the style rule. That’s all, enjoy your new site logo!

2. Changing an icon to the image

1. The first steps are pretty similar to the ones, described above. Please, open your website in any browser, right-click the logo and choose ‘Inspect’ in a drop-down. Inspector tool will show you a line like:
2. Connect to your FTP or open the File Manager at your hosting cPanel.
3. Open the images folder and upload your logo image there, for example, my-logo.png. It’s recommended that you use small images, optimized for web, preferably in PNG or JPG format.
4. Open the HTML file of your page (e.g., index.html file) and locate the line you inspected previously. Replace it with the one like this:

   If your logo image is named ‘my-logo.png’ and it’s uploaded to the images folder, your line should look the following way
5. Save the HTML file after editing and check your website, logo image shows up on site correctly now. Enjoy working on your website!