How do I use Bootstrap Glyphicons in 3.0.0?

2019-04-18 06:34发布

站内文章 / 移动开发
25 0 0

问题:

I'm using Glyphicons in Bootstrap. I was calling in the CSS straight from http://glyphicons.getbootstrap.com/css/bootstrap-glyphicons.css but this has now disappeared and was not recommended.

This apparently coincides with Twitter making the Glyphicons available in the Bootstrap package again. I am using Bootstrap 3.0.0 RC1 or RC2.

My problem: I have no idea how to use the icons in my own hosting... Seems to me the code is contained within the bootstrap.css (?). I have uploaded the "fonts" directory but am only getting blank, empty-box icons where there should be proper icons.

Any ideas please? What should be where and how should it be called?

回答1:

The bootstrap-glyphicons.css file seems to have been removed with the final\production Bootstrap 3.0.0. Simply download the zip from http://getbootstrap.com/ and then copy the dist/css/bootstrap.min.css file in your css folder. You should then include it in your HTML page as such:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Glyphicons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS file -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head>
  <body>

    <!-- Glyphicon in a H1 tag -->
    <h1>Hello, <span class="glyphicon glyphicon-globe"></span> !</h1>

  </body>
</html>

Source: http://getbootstrap.com/getting-started/



回答2:

If you have already put in the fonts directory, calling the icons now would be <span class="glyphicon glyphicon-pencil"></span> instead of <i class="icon-large icon-pencil"></i>.



回答3:

Just make sure your fonts folder is placed correctly relative to the .css file: ../fonts

some-root-folder
├--my-css-folder
|  └--bootstrap.min.css
└--fonts
   └--glyphicons-halflings-regular.ttf


回答4:

I followed this post http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application. I don't know if the best way, but Works.



标签： twitter-bootstrap icons glyphicons
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~