2024年6月5日 星期三

在HTML網頁上使用小圖示

官網：https://fontawesome.com/



程式：可以把下列HTML程式儲存成index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
    </head>

    <body>
		<i class="fas fa-solid fa-map-marker-alt"></i>	
		<i class="fas fa-solid fa-desktop"></i>
		<i class="fas fa-solid fa-user"></i>
		<i class="fas fa-download"></i>
		<i class="fas fa-camera"></i>
		<i class="fas fa-ban"></i>
		<i class="fas fa-solid fa-coffee"></i>
		<br/>
		<i class="fas fa-solid fa-snowboarding"></i>
		<i class="fas fa-solid fa-snowboarding fa-rotate-90"></i>
		<br/>
		<br/>
		<span class="fas fa-stack fa-2x">
			<i class="fas fa-camera fa-stack-1x"></i>
			<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
		</span>	
		<br/>
		<span class="fas fa-stack fa-1x">
			<i class="fas fa-square fa-stack-2x"></i>
			<i class="fas fa-coffee fa-stack-1x fa-inverse"></i>
		</span>
		<span class="fas fa-stack fa-2x">
			<i class="fas fa-square fa-stack-2x"></i>
			<i class="fas fa-coffee fa-stack-1x fa-inverse"></i>
		</span>
		<span class="fas fa-stack fa-3x">
			<i class="fas fa-square fa-stack-2x"></i>
			<i class="fas fa-coffee fa-stack-1x fa-inverse"></i>
		</span>		
		<span class="fas fa-stack fa-4x">
			<i class="fas fa-square fa-stack-2x"></i>
			<i class="fas fa-coffee fa-stack-1x fa-inverse"></i>
		</span>	
		<ul class="fa-ul">
			<li><span class="fa-li"><i class="fas fa-solid fa-check-square"></i></span>List icons can</li>
			<li><span class="fa-li"><i class="fas fa-solid fa-check-square"></i></span>be used to</li>
			<li><span class="fa-li"><i class="fas fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
			<li><span class="fa-li"><i class="fas fa-regular fa-square fa-pulse"></i></span>in lists</li>
		</ul>
	</body>

</html>


張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)