There is a couple of HTML code, hex code, Unicode, and even CSS code that you can use to add an info symbol to your web page.
First, let’s see what type of info symbols you will get in this post.
The second & third icon looks the same. However, their entities are different.
End of this post, I will also show you how to add a mouseover help text once you hover the mouse on the info icon. Let’s see a demo below (hover your mouse to see the output).
How to create these info symbols in HTML?
You can just copy & paste any of the code in your HTML to create the info symbols.
Not to mention, it also works on WordPress websites.
However, the last 3 symbols may not work properly on some mobile devices. But the first one works everywhere exactly as you see here. So to avoid this glitch, I would suggest using the first icon.
How to insert this info symbol using CSS?
To insert the info symbol using CSS, use the “content” property. For more clarification, see my code below.
<p class="info-symbobl-css">This info symbol has been inserted using CSS <span></span></p>
This info symbol has been inserted using CSS
Now that you know how to add an info symbol to HTML & CSS.
But in most cases, you need to also add additional information that will trigger on mouse hover. That means if someone hovers or clicks on the info icon, he/she will see some additional help text. And this is the main purpose of using the info symbol.
To add this kind of mouseover text or tooltip, see another post that I created to solve exactly this purpose.
Get information symbols from emoji
You can also copy & paste the information symbol from emojis & other third-party sites. For example, I forked an emoji cheat sheet that you can use. If you want the information symbol from this sheet, search for “information_source” to find it. Once you find it, just copy and paste it like this ℹ️
Also, there are other emoji websites that you can use as well. Just make sure the symbol works well on all devices.
Create your own info symbol
You’re just not limited to using HTML code, Unicode, emojis, etc. You can also create your own info symbol and add custom styles to it. Such as color, border, border color, background color, etc.
Let’s see an example that I created.
This information symbol I have created using HTML & CSS i
For the above example, I have the following HTML & CSS.
<p>This information symbol I have created using HTML & CSS <span>i</span></p>
padding: 0 8px;
border: 1px solid #E53D30;
Did you get the idea?
|Learn & practice CSS with real-world examples
|Learn basic CSS from the ground up.
|Build real projects in HTML CSS.
Build HTML CSS projects
You got a couple of ways to add info symbols to your HTML & CSS. Which HTML code you used? Or which CSS content property did you use? Let me know.