Our page looks really good now, but again,
checking our finished result here.
This arrow here next to the explore text is missing.
Now you might say this could be an icon or an image or
anything like this or some kind of predefined object
we added right here.
But this is actually not the case.
In our code back here in the HTML file.
You might remember this meta information up here in the
head. Meta charset UTF 8.
This is a standard applied to our HTML page here,
which allows the browser and HTML to understand a certain
set of characters on any platform on any device.
Now, this set of characters
is not limited to
text and numbers only.
It is text numbers, of course,
but the result that is being displayed can also be different
from plain numbers and texts.
Attached to this video you can find the link
to this Wikipedia page,
and turns out that in Unicode,
we also have arrows available.
We need an arrow, basically,
we need an arrow from the left to the right.
And if we check this list down here,
well then something like this here might be exactly what we
are looking for.
We also have these cryptic numbers here.
What do these mean?
Well, 2, 1 9 X simply means we need to enter
2, 1, 9 X.
So two in our case for the right arrow, so 2 1 9 2.
And then at the beginning,
this U plus is not what we need for our UTF eight standard
Here, we want to display the characters as
hexadecimal reference,
which would mean instead of this U plus
we have to add an and symbol, a hash and an X.
Now this sounds a bit complicated,
but basically you can remember the number 2, 1 9 2,
for this right arrow, and go back to the code.
And know here into our places HTML file,
and there we'll go to our
explore reference here for our Barcelona link.
And now we entered this 2, 1 9 2 number I just talked about.
And now for the hexadecimal reference in UTF eight,
we enter and hash
and an X.
This looks a bit strange,
but if we save this and go back to the project, yeah,
you see, we have the arrow in here now.
And this just works because of this predefined and
globally available character set.
Now,
what we have to do now is we have to add this arrow here
to our other explorer links.
So this is a bit of copy and paste here.
So just selected including the space here
and now add it once.
Twice right here,
right there,
right here.
Paris,
Sydney,
and
Tokyo down here.
So let's see, yeah.
Now we have this nice little arrow added to all our cities.
No, I forgot Bali.
Sorry, my bad.
Such a nice destination.
Now the arrow is also here.
With this,
we learned another very helpful feature,
which allows us to easily implement such symbols without
adding any images or icons.
Of course,
this is not limited to arrows here.
Attached to the lecture,
you can find more resources about Unicode and how you can
implement different, nice default symbols with it.
This means we are almost done with this module.
The next lecture we'll apply some finishing touches
and see if we have to clean up our code a bit.