|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
如何將li樣式更改為Font Awesome圖標(biāo)
作者:admin 時(shí)間:2021-5-25 1:10:48 瀏覽:<li>是一個(gè)項(xiàng)目列表標(biāo)簽，它的樣式有disc(實(shí)心圓)，circle(空心圓)、square(正方形)等，我們也可以使用列表樣式圖像屬性list-style-image來(lái)指定列表項(xiàng)標(biāo)記的圖像。本文要介紹的是，如何將li樣式更改為Font Awesome圖標(biāo)。
如何將li樣式更改為Font Awesome圖標(biāo)
添加font-awesome的css文件
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
創(chuàng)建列表
接下來(lái)，我們將創(chuàng)建要修改樣式的列表。
<ul id="myList">
<li>蘋(píng)果</li>
<li>橙子</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
添加CSS
最后，我們添加CSS來(lái)更改列表的樣式。
#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代碼請(qǐng)看：Font Awesome content代碼匯總，共246個(gè)
完整的HTML
下面是完整的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>蘋(píng)果</li>
<li>橙子</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
</div>
</div>
</div>
</body>
</html>
注意！你的Web服務(wù)器可能要安裝配置Font Awesome圖標(biāo)字體，請(qǐng)看以下幾篇文章。
Linux Nginx安裝配置Font Awesome圖標(biāo)字體
標(biāo)簽: li
- 站長(zhǎng)推薦
