Bootstrap 字体图标 Glyphicons 使用-蒲公英云

Bootstrap 字体图标 Glyphicons 使用

Intro

Bootstrap捆绑了200多种字体格式的字形。
字体图标：在Web项目中使用的图标字体。

依赖

两种方式，直接在HTML中使用CDN，或依赖本地文件(略)。
CDN如下：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用

简单使用search图标
<span class="glyphicon glyphicon-search">搜索</span>
在style属性中自定义元素的样式(字体颜色color, 大小font-size, 文本阴影text-shadow)。

<span class=”glyphicon glyphicon-search”
```
style="color: black; text-shadow: red 1px 1px 1px; font-size: 50px;">搜索</span>
```
在按钮中使用

页面如下：
在这里插入图片描述

Link

自定制Glyphicons图标的样式
FontAwesome 字体图标库使用

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Bootstrap</title>
</head>
<body>
    <span class="glyphicon glyphicon-search">搜索</span>
    <span class="glyphicon glyphicon-search"
        style="color: black; text-shadow: red 1px 1px 1px; font-size: 50px;">搜索</span>
        <!-- 自定义字体颜色color, 大小font-size, 文本阴影text-shadow -->
    <button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-primary btn-lg">
        <span class="glyphicon glyphicon-user" style="text-shadow: black 5px 3px 3px;">User</span>
    </button>
</body>
</html>