html li设置图标大小,如何将li样式更改为Font Awesome图标

是一个项目列表标签，它的样式有disc(实心圆)，circle(空心圆)、square(正方形)等，我们也可以使用列表样式图像属性list-style-image来指定列表项标记的图像。本文要介绍的是，如何将li样式更改为Font Awesome图标。

如何将li样式更改为Font Awesome图标

添加font-awesome的css文件

创建列表

接下来，我们将创建要修改样式的列表。

• 苹果
• 橙子
• 草莓
• 香蕉

添加CSS

最后，我们添加CSS来更改列表的样式。

#myList{

list-style: none;

}

#myList li {

padding-left: 1.3em;

}

#myList li:before {

content: "\f005";

font-family: FontAwesome;

display: inline-block;

margin-left: -1.3em;

width: 1.3em;

}

#listDiv{

font-size: 20px;

}

在CSS中，设置了要替换默认样式的Font Awesome图标的unicode：\f005;。

Font Awesome图标

完整的HTML

下面是完整的HTML。

html>

如何将li样式更改为Font Awesome图标

#myList{

list-style: none;

}

#myList li {

padding-left: 1.3em;

}

#myList li:before {

content: "\f005";

font-family: FontAwesome;

display: inline-block;

margin-left: -1.3em;

width: 1.3em;

}

#listDiv{

font-size: 20px;

}

如何将li样式更改为Font Awesome图标

水果

• 苹果
• 橙子
• 草莓
• 香蕉

注意！你的Web服务器可能要安装配置Font Awesome图标字体，请看以下几篇文章。