How to add an info symbol in HTML CSS?

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).

This is an example text to show the info icon & tooltip text. ⓘ

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>

span::after {
  content: "\2139";
}

Output

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.

For the above example, I have the following HTML & CSS.

<p>This information symbol I have created using HTML & CSS <span>i</span></p>

span {
  padding: 0 8px;
  margin: 10px;
  border: 1px solid #E53D30;
  border-radius: 50%;
  font-weight: 700;
}

Did you get the idea?

Build HTML CSS projects

Conclusion

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.