Let's continue with our project! This time, we will learn how to extract the profile image directly from the Google page, as well as the navigation icon.
Note that for this step we are going to use an image hosted on a server outside of us, so it will be an absolute path. You can find the image here.
Styles to the navigation icon
The first thing is to apply a class to the label where our icon is located and remove the text so that it does not conflict with the icon.

We proceed to apply the styles in our CSS file.

- As you can see, we are still very specific in calling the class
- We insert the image as background with the url attribute. Remember to paste the url between quotes
- In cases, if the inserted image is too small in relation to the container, it will be repeated to fill the space. background-repeat: no-repeat avoids it.
- background-position: center to center our icon
- background-size: contain adjusts the image to the size of the container, avoiding the aforementioned point in case it is too small.
- We define its height and width in 25 pixels.
We should have this result:

Styles to profile image.
To start this step, we must get the link to our profile image from Google.
Let's go to google.com and right click on our picture.
Click on inspect.

We see that the console positions us right on the url of our photo.

We copy that link.
We go to our HTML file and change the content of our Photos navigation bar and insert an img tag in its place.
We paste the link in the src attribute.

Note: the URL is probably too long for you to see it in its entirety on your editor screen. To avoid that annoying scroll, go to the View tab of your editor and activate the Word Warp function.

You should be able to see your image already embedded in your project:

Final Details
As you may notice, there are a few details missing to make it look like the original Google page. Let's go to our CSS file.

- We call our img tag inside the .nav-right-section class of the nav tag.
- We apply a border-radius of 50% to make it completely round.
- We also apply a margin-left of 10 pixels so that it is not so close to the menu icon.
At the end your header should have this style:

Additionally, I leave you a list of sites where you can find icons for your projects:
Perfect! We have just styled the header of our project. Let's keep working on it.
Contribution created with contributions from: Anggi Vanesa Pallares Solis and Jose Miguel Veintimilla.
Want to see more contributions, questions and answers from the community?