首页 > 代码库 > Bootstrap的布局组件——字体图标

Bootstrap的布局组件——字体图标

2024-09-19 12:46:40   218人阅读

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属性来获得自己想要的字体

Bootstrap的布局组件——字体图标


联系
我们