How to add icons to li tags in HTML

This article mainly shows you "how to add icons to li tags in HTML", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "how to add icons to li tags in HTML" this article.

1. Use the special properties of CSS

The function of ul {list-style-type:disc;} / / disc is to add a black dot before each li. Other common ones are square: black square; none: no list style; decimal: number

You can also control whether the icon is outside or inside the li tag, such as

Ul {list-style-position:inside;} or outside

If you want to add your own defined pattern, you can use the

Ul {list-style-image:url (picture address);}

Of course, this can also be used with position.

But I never apply the above attributes, and I don't recommend you to use them. Why?

First of all, ul's list-style-type displays different dots or squares in different browsers, which is not beautiful.

In addition, the positon attribute is not easy to use. I have tried to use it this time, and the result is that it is difficult to unify the orientation shown in IE6 and above and in Firefox.

two。 I suggest using background

Ul {... List-style-type:none;. Li {... Background:url (background icon) no-repeat0px0px;... .}

Here, the function of no-repeat is to make the image do not have a tiling effect, and 0pxre0px is the coordinate of the display of the positioning picture.

Here, to add a background image to li, you also need to add padding-left: any number of px, otherwise the text will block the background icon, but do not add width to li at the same time, otherwise there will be problems with compatibility in different browsers. For more information, please see CSS to use the padding attribute carefully.

3. Using background to realize ranking list

In fact, it's very simple. You just need to be flexible.

Ul {... Background:url (path) no-repeat1px2px;... .}

You should know that the pictures are added to ul instead of li, but the difference is that the pictures are arranged in column order. .. Or any other effect you want, note that the height of each line closely corresponds to the picture.

The above is all the content of the article "how to add icons to li tags in HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!