Font Awesome是開放源碼,提供圖示供商頁網站使用。在Bootstrap網頁可以很容易地使用Font Awesome圖示。以下說明在在Bootstrap網頁使用Font Awesome圖示的步驟。
首先到此網頁複製CDN位置 : http://www.bootstrapcdn.com/fontawesome/
到Font Awesome網站挑選圖示, https://fortawesome.github.io/Font-Awesome/icons/
例如點選此圖示,網頁下方便會列出樣式名稱:
然後我們就可以在Bootstrap網頁中使用它們
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
body {
padding: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<div class="container">
<span class="fa fa-venus-mars fa-1x"></span>
<span class="fa fa-venus-mars fa-2x"></span>
<span class="fa fa-venus-mars fa-3x"></span>
<span class="fa fa-venus-mars fa-4x"></span>
<span class="fa fa-venus-mars fa-5x"></span>
</div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
</html>
網頁執行結果:
沒有留言:
張貼留言