2015年9月1日 星期二

在Bootstrap網頁使用Font Awesome圖示

 

Font Awesome是開放源碼,提供圖示供商頁網站使用。在Bootstrap網頁可以很容易地使用Font Awesome圖示。以下說明在在Bootstrap網頁使用Font Awesome圖示的步驟。

首先到此網頁複製CDN位置 : http://www.bootstrapcdn.com/fontawesome/

image

 

到Font Awesome網站挑選圖示, https://fortawesome.github.io/Font-Awesome/icons/

例如點選此圖示,網頁下方便會列出樣式名稱:

image

 

然後我們就可以在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>

網頁執行結果:

image

沒有留言:

總網頁瀏覽量