zoukankan      html  css  js  c++  java
  • Bootstrap的布局组件——字体图标

    1.Bootstrap的字体图标

    字体图标是web项目中使用的图标字体。

    点击这里可以查看字体图标列表。

    2.@font-face的意义和使用(如何引用这些字体图标)

    @font-face使得设计师可以把自定义的字体显示在网页上,而不用担心用户的主机上没有这个字体而无法显示。

    通过@font-face方法,可以把自定义的字体从服务器或者字体来源处下载到用户主机上。

    以下代码来自于:点击这里

    1 @font-face {
    2     font-family: DeliciousRoman;
    3     src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');       //字体的外部来源
    4 }
    1 p {
    2     font-family: DeliciousRoman, Helvetica, Arial, sans-serif;                      //这样就可以引用字体
    3 }

    或者你的字体就在你的服务器上

    1 @font-face {
    2     font-family: DeliciousRoman;
    3     src: url('…/Delicious-Roman.otf');
    4 }

    3.使用字体图标的方法

     1 <!DOCTYPE html><html><head>
     2    <title>Bootstrap 实例 - 如何使用字体图标</title>
     3    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     4    <script src="/scripts/jquery.min.js"></script>
     5    <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><p>
     6    <button type="button" class="btn btn-default">
     7       <span class="glyphicon glyphicon-sort-by-attributes"></span>
     8    </button>
     9    <button type="button" class="btn btn-default">
    10       <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    11    </button>
    12    <button type="button" class="btn btn-default">
    13       <span class="glyphicon glyphicon-sort-by-order"></span>
    14    </button>
    15    <button type="button" class="btn btn-default">
    16       <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    17    </button></p><button type="button" class="btn btn-default btn-lg">
    18   <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm">
    19   <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs">
    20   <span class="glyphicon glyphicon-user"></span> User</button></body></html>

    PS:关于字体图标无法显示的问题:

    网上众说纷纭,有大神说是因为平常引用bootstrap.min.css的时候是引用的部分,没有把fonts文件夹下的字体关联进去,但具体的解决方法我尝试了没有成功。我的解决方法是采用cdn提供的bootstrap.min.css。比如:我引用的是百度cdn下的:

    http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css

    这样图标就可以正常显示了。

    点击这里进入百度cdn。

    4.定制自己的字体

    如果对引用的字体不满意,我们可以在它的基础上修改的style属性来获得自己想要的字体

    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    hibernate_0100_HelloWorld
    MYSQL子查询的五种形式
    JSF是什么?它与Struts是什么关系?
    nop指令的作用
    htmlparser实现从网页上抓取数据(收集)
    The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter. Struts tags are only usable when the
    FCKeditor 在JSP上的完全安装
    Java遍历文件夹的2种方法
    充电电池和充电时间说明
    吃知了有什么好处
  • 原文地址:https://www.cnblogs.com/comefuture/p/6811417.html
Copyright © 2011-2022 走看看