|
|
|
|
|
<li>是一個項(xiàng)目列表標(biāo)簽,它的樣式有disc(實(shí)心圓),circle(空心圓)、square(正方形)等,我們也可以使用列表樣式圖像屬性list-style-image來指定列表項(xiàng)標(biāo)記的圖像。本文要介紹的是,如何將li樣式更改為Font Awesome圖標(biāo)。
如何將li樣式更改為Font Awesome圖標(biāo)
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
接下來,我們將創(chuàng)建要修改樣式的列表。
<ul id="myList">
<li>蘋果</li>
<li>橙子</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
最后,我們添加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中,設(shè)置了要替換默認(rèn)樣式的Font Awesome圖標(biāo)的unicode:\f005;
。
Font Awesome圖標(biāo)
Font Awesome圖標(biāo)的unicode代碼請看:Font Awesome content代碼匯總,共246個
下面是完整的HTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何將li樣式更改為Font Awesome圖標(biāo)</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
<style type="text/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;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header text-center">如何將li樣式更改為Font Awesome圖標(biāo)</h1>
<div class="row">
<div class="col-sm-4 col-sm-offset-4" id="listDiv">
<h3>水果</h3>
<ul id="myList">
<li>蘋果</li>
<li>橙子</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
</div>
</div>
</div>
</body>
</html>
注意!你的Web服務(wù)器可能要安裝配置Font Awesome圖標(biāo)字體,請看以下幾篇文章。
Linux Nginx安裝配置Font Awesome圖標(biāo)字體