如何在引导程序 3 中包含字形 [英] how to include glyphicons in bootstrap 3
问题描述
我之前没有使用过任何引导框架.我想在我的页面上的 bootstrap 3 中包含一些字形.据我所知，它们应该包含在我添加到我的页面的 bootstrap.css 文件中.当我查看 bootstrap.css 文件时，但我没有看到对它们的任何引用?虽然它是一个大文件，但我可能错过了一些东西.
我注意到当我打开从 bootstrap 3 下载的 dist 文件夹时，有一个单独的文件夹 fonts 包含名为:
glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff这似乎是字形的位置，但我不知道如何将它们附加到我的网站?如何将字形附加到我的页面?
提前感谢您的帮助
下面的代码显示了附加的 bootstrap.css 文件:
<头><title>引导示例</title><meta name="viewport" content="width=divice-width, initial-scale=1.0"><!-- 引导程序--><link href="bootstrap.css" rel="stylesheet" media="screen">这里是 html 代码的一部分，显示了字形应该在哪里:
<ul class="nav navbar-nav"><li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>主页</a></li><li><a href="#"><span class="glyphicon glyphicon-star"></span>最佳目的地</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><spanclass="glyphicon glyphicon-user"></span>关于我们<b class="caret"></b></a> 解决方案 我认为您的具体问题不是如何使用 Glyphicons，而是了解 Bootstrap 文件如何协同工作.
Bootstrap 需要一个特定的文件结构才能工作.我从你的代码中看到你有这个:
您的 Bootstrap.css 正在从与您的页面相同的位置加载，如果您不调整文件结构，这会产生问题.
但首先，我建议您像这样设置文件夹结构:
/css <-- 这里是 Bootstrap.css/fonts <-- 这里是 Bootstrap 字体/img/js <-- 在此处引导 JavaScript索引.html
如果您注意到，这也是 Bootstrap 在其下载 ZIP 中构建文件的方式.
然后像这样包含 Bootstrap 文件:
或者<link href="./css/bootstrap.css" rel="stylesheet" media="screen">或者<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
取决于您的服务器结构或您的目标.
第一个和第二个是相对于文件的当前目录的.第二个更明确，先说这里"(./)，然后是 css 文件夹(/css).
如果您正在运行网络服务器，第三个是很好的，并且您可以使用相对于根符号，因为前导/"将始终从根文件夹开始.
那么，为什么要这样做?
Bootstrap.css 为 Glyphfonts 提供了以下特定行:
@font-face {font-family: 'Glyphicons Halflings';src: url('../fonts/glyphicons-halflings-regular.eot');src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') 格式('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') 格式('woff'), url('../fonts/glyphicons-halflings-regular.ttf') 格式('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')格式('svg')；}
您可以看到 Glyphfonts 是通过进入一个目录 ../ 然后查找名为 /fonts 和 THEN<的文件夹来加载的/em> 加载字体文件.
URL 地址相对于 CSS 文件的位置.因此，如果您的 CSS 文件位于这样的相同位置:
/fontsBootstrap.css索引.html
CSS 文件比查找 /fonts 文件夹更深一层.
那么，假设这些文件的实际位置是:
C:wwwfontsC:wwwBoostrap.cssC:wwwindex.html
从技术上讲，CSS 文件将在以下位置查找文件夹:
C:fonts
但您的文件夹实际上位于:
C:wwwfonts
所以看看这是否有帮助.您无需执行任何特殊"操作即可加载 Bootstrap Glyphicon，除非确保正确设置了文件夹结构.
当你解决这个问题时，你的 HTML 应该是:
<span class="glyphicon glyphicon-comment"></span>
注意，您需要两个类.第一类glyphicon 设置基本样式，而glyphicon-comment 设置特定图像.
I've not used any of the bootstrap frameworks before. I want to include some of the glyphicons in bootstrap 3 on my page. From what I understand they should be included in a bootstrap.css file which I've added to my page. When I've looked in the bootstrap.css file however I don't see any reference to them ? Although its a large file I may have missed something.
I have noticed that when I opened the dist folder downloaded from bootstrap 3 there is a separate folder fonts that contains files named:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
It Seems like this is where the glyphicons are however I don't know how to attach these to my site? How do I attach the glyphicons to my page ?
Thanks for any help in advance
The code below shows the attached bootstrap.css file:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet" media="screen">
</head>
and here is the part of the html code showing where the glyphicons should be:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
Destinations</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
解决方案 I think your particular problem isn't how to use Glyphicons but understanding how Bootstrap files work together.
Bootstrap requires a specific file structure to work. I see from your code you have this:
<link href="bootstrap.css" rel="stylesheet" media="screen">
Your Bootstrap.css is being loaded from the same location as your page, this would create a problem if you didn't adjust your file structure.
But first, let me recommend you setup your folder structure like so:
/css <-- Bootstrap.css here
/fonts <-- Bootstrap fonts here
/img
/js <-- Bootstrap JavaScript here
index.html
If you notice, this is also how Bootstrap structures its files in its download ZIP.
You then include your Bootstrap file like so:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
Depending on your server structure or what you're going for.
The first and second are relative to your file's current directory. The second one is just more explicit by saying "here" (./) first then css folder (/css).
The third is good if you're running a web server, and you can just use relative to root notation as the leading "/" will be always start at the root folder.
So, why do this?
Bootstrap.css has this specific line for Glyphfonts:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
What you can see is that that Glyphfonts are loaded by going up one directory ../ and then looking for a folder called /fonts and THEN loading the font file.
The URL address is relative to the location of the CSS file. So, if your CSS file is at the same location like this:
/fonts
Bootstrap.css
index.html
The CSS file is going one level deeper than looking for a /fonts folder.
So, let's say the actual location of these files are:
C:wwwfonts
C:wwwBoostrap.css
C:wwwindex.html
The CSS file would technically be looking for a folder at:
C:fonts
but your folder is actually in:
C:wwwfonts
So see if that helps. You don't have to do anything 'special' to load Bootstrap Glyphicons, except make sure your folder structure is set up appropriately.
When you get that fixed, your HTML should simply be:
<span class="glyphicon glyphicon-comment"></span>
Note, you need both classes. The first class glyphicon sets up the basic styles while glyphicon-comment sets the specific image.
这篇关于如何在引导程序 3 中包含字形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
- 字形和引导程序 4;
- 引导3中的垂直对齐字形;
- 如何在引导字形周围添加环;
- 引导字形缺失;
- 堆栈引导字形;
- 如何在节点项目中包含引导程序;
- 如何在引导程序 3 中居中表单;
- 包含引导程序 3 时出现 Webpack 错误;
- 如何在引导程序 3 中获得响应式按钮;
- 引导程序3与引导程序4;
- 如何在程序中包含Direct3D？;
- 如何在Bootstrap 3字形图标中传递数字;
- 引导字形不显示在angular2中;
- 一些引导字形未加载;
- 如果通过Ajax加载引导程序，如何在引导程序中打开模式?;
- 引导程序 3 中的等高列;
- 引导程序中的等高列3;
- cakephp我如何在我的应用程序中包含引导框架CSS样式？;
- 如何在引导程序中添加汉堡菜单;
- 如何在引导程序 4 中删除轮廓;
- 如何在 yii 中安装引导程序扩展;
- 如何在角中隐藏引导程序模态;
- 如何在C中创建引导加载程序;
- 如何在引导程序 4 中居中卡片?;
- 引导程序 3 到引导程序 4 列不再水平对齐;
前端开发最新文章
- 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
- 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
- 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
- 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
- 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
- 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
- 此请求已被阻止;内容必须通过HTTPS提供;
- 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
- 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
- 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
