Bootstrap圖示及另一個好用圖示網站介紹
阿新 • • 發佈：2021-07-28
元件
Bootstrap 自帶了大量可複用的元件，包括字型圖示、下拉選單、導航、警告框、彈出框等更多功能。
http://www.fontawesome.com.cn/也有大量可用圖示使用，Font Awesome 完全相容 Bootstrap 的所有元件。
Font Awesome下載解壓後，可只留css和fonts目錄檔案，其餘均可刪除。
用span或i標籤，因為是內聯標籤，想放在哪裡都可以。
還可以對其設定顏色，直接對標籤進行設定即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charsetwhile True: print('studying...')="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> <style> span,i{ color: saddlebrown; } </style> </head> <body> <div class="container"><div class="row"> <div class="col-md-8 col-md-offset-2"> <h2><span class="glyphicon glyphicon-user"></span> 登入註冊</h2> <p><i class="fa fa-users" aria-hidden="true"></i> username:<input type="text" class="form-control" placeholder="請輸入賬號"></p> <p><i class="fa fa-key" aria-hidden="true"></i> password:<input type="text" class="form-control" placeholder="請輸入密碼"></p> </div> <div class="col-md-8 col-md-offset-2"> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> </div> </div> </div> </body> </html>