bootstrap之glyphicon字体图标

? Bootstrap全局css样式

glyphicon字体图标用途广泛，可以把它们应用到按钮、下拉菜单、导航、警告框、弹出框、输入框等地方。例如，在做SM管理系统项目的时候，就可以在编辑、删除按钮中使用glyphicon字体图标。

出于性能的考虑，所有图标都需要一个基类glyphicon 和 一个对应每个图标的类glyphicon-xxx。我们可直接到Glyphicons字体图标库中，将图标下面的两个类copy下来，放到标签元素中使用即可。

Glyphicons图标类可以应用到很多元素中

<a class="glyphicon glyphicon-refresh" href="#"> 
        a> <p class="glyphicon glyphicon-edit"> 
         p> <span class="glyphicon glyphicon-trash"> 
          span> <li class="glyphicon glyphicon-search"> 
           li> <div class="glyphicon glyphicon-home"> 
            div> . . . 

但，Glyphicons图标类一般不在同一个元素中与其它类共同存在。而是创建一个嵌套的标签，并将图标类应用到这个标签中。并且，图标类一般不应用在包含任何文本内容或子元素的元素上。

<span class="glyphicon glyphicon-edit"> 
         span> 编辑 

【字体图标按钮】

<button class="btn btn-primary"> <span class="glyphicon glyphicon-edit"> 
            span> 编辑  
             button> <button class="btn btn-primary"> <span class="glyphicon glyphicon-trash"> 
              span> 删除  
               button> <button class="btn btn-primary"> <span class="glyphicon glyphicon-search"> 
                span> 查询  
                 button> 

【定制字体阴影】

<button class="btn btn-primary" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-edit"> 
             span> 编辑  
              button> <button class="btn btn-primary" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-trash"> 
               span> 删除  
                button> <button class="btn btn-primary" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-search"> 
                 span> 查询  
                  button> 

【定制字体颜色】

<button class="btn btn-primary" style="color: red"> <span class="glyphicon glyphicon-edit"> 
              span> 编辑  
               button> <button class="btn btn-primary" style="color: red"> <span class="glyphicon glyphicon-trash"> 
                span> 删除  
                 button> <button class="btn btn-primary" style="color: red"> <span class="glyphicon glyphicon-search"> 
                  span> 查询  
                   button> 

【定制字体大小】

<button class="btn btn-primary" style="font-size: 25px"> <span class="glyphicon glyphicon-edit"> 
               span> 编辑  
                button> <button class="btn btn-primary" style="font-size: 20px"> <span class="glyphicon glyphicon-trash"> 
                 span> 删除  
                  button> <button class="btn btn-primary" style="font-size: 15px"> <span class="glyphicon glyphicon-search"> 
                   span> 查询  
                    button> 

更多的时候，应用了图标类的标签，是包裹在标签中的。

<a class="btn btn-primary" href="#"> <span class="glyphicon glyphicon-edit"> 
                  span> edit  
                   a> <a class="btn btn-danger" href="#"> 
                  
                   
                     span> delete  
                      a> <a class="btn btn-success" href="#"> 
                     
                      
                        span> search  
                         a>  
                     
                 

参考

Glyphicons字体图标库

Glyphicons字体图标定制