如何在不使用Bootstrap CSS的情况下包含Glyphicons

Question

如何在不使用Bootstrap CSS的情况下包含Glyphicons

Raj*_*aja 18 html css twitter-bootstrap glyphicons twitter-bootstrap-3

我的客户端项目使用一些基本的HTML和CSS.但他们喜欢网站菜单上的Glyphicons.所以我只是尝试将Glyphicons包含在Bootstrap CSS中,但确实如此,但其他css在包含Bootstrap CSS后受到影响.

所以这个问题可能很愚蠢,我只想在没有bootstrap css的客户端网站菜单链接中包含Glyphicons.

这有可能先行吗？我知道Glyphicons free将与Bootstrap Package一起提供.

而其他的事情是我的客户不希望我包含Bootstrap CSS,因为它影响页面结构.

那么可以包含没有Bootstrap css的Glyphicons或我自己的自定义css吗？

任何帮助,将不胜感激!

Answer 1

Art*_*sov 15

我试图让Bootstrap的glyphicons在没有安装整个bootstrap.css文件的情况下工作,但是一半的工作变成了太多工作而我放弃了.相反,我遇到了Font Awesome.Bootstrap 3本身使用它(或曾经使用过).它被设计为独立使用,因此它非常简单轻便.你所要做的就是:

下载 Font Awesome包;
将font-awesome.min.cssFont Awesome的fonts文件夹中的css文件夹和所有字体文件复制到fonts文件夹中;
包含<link rel="stylesheet" href="path/to/css/font-awesome.min.css">在<head>您的HTML中;
从图标库中选择图标并将其放入应用程序中,就像启动Bootstrap的字形一样.

Answer 2

thd*_*oan 11

有这个:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

Run Code Online (Sandbox Code Playgroud)

但是,如果要节省一些带宽,可以直接从CDN加载字体,然后内联所需的CSS,如下所示:

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

Run Code Online (Sandbox Code Playgroud)

您可以在此处的演示中看到一个示例("Eye of Medusa"和"Rain of Fire"菜单项).