在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件： glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf...@font-face { font-family: 'Glyphicons Halflings'; src: url('...../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?.../fonts/glyphicons-halflings-regular.woff') format('woff'), url('...../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .glyphicon { position
可以使用Bootstrap 框架的 glyphicon 类，可以基于项目的 Bootstrap 来免费使用Glyphicons Halflings 提供的图标库。...查看可以使用的图标列表https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm 字体图标(Glyphicons) 添加图标使用示例
' Copying '/opt/py3/lib/python3.6/site-packages/rest_framework/static/rest_framework/fonts/glyphicons-halflings-regular.svg...' Copying '/opt/py3/lib/python3.6/site-packages/rest_framework/static/rest_framework/fonts/glyphicons-halflings-regular.ttf...' Copying '/opt/py3/lib/python3.6/site-packages/rest_framework/static/rest_framework/fonts/glyphicons-halflings-regular.woff...' Copying '/opt/py3/lib/python3.6/site-packages/rest_framework/static/rest_framework/img/glyphicons-halflings-white.png...' Copying '/opt/py3/lib/python3.6/site-packages/rest_framework/static/rest_framework/img/glyphicons-halflings.png
/jumpserver/apps/static/fonts/fontawesome-webfont.woff2' Copying '/opt/jumpserver/apps/static/fonts/glyphicons-halflings-regular.eot...' Copying '/opt/jumpserver/apps/static/fonts/glyphicons-halflings-regular.svg' Copying '/opt/jumpserver.../apps/static/fonts/glyphicons-halflings-regular.ttf' Copying '/opt/jumpserver/apps/static/fonts/glyphicons-halflings-regular.woff...' Copying '/opt/jumpserver/apps/static/fonts/glyphicons-halflings-regular.woff2' Copying '/opt/jumpserver
/fonts/glyphicons-halflings-regular.eot'); /* IE9 Compat Modes */ src: url('..../fonts/glyphicons-halflings-regular.eot?.../fonts/glyphicons-halflings-regular.woff') format('woff'), /* Modern Browsers */ url('..../fonts/glyphicons-halflings-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('..../fonts/glyphicons-halflings-regular.svg#glyphicons') format('svg'); /* Legacy iOS */ } .hd-r
图片.png Glyphicons Halflings 官方网址：http://glyphicons.com/ http://v3.bootcss.com/components/ 描述：Glyphicons...为了表示感谢,希望你在使用时尽量为 Glyphicons 添加一个友情链接 使用案例： ?
JS文件 │ ├── bootstrap.js // 未压缩的文件 │ └── bootstrap.min.js // 压缩之后的文件 └── fonts/ // 字体文件 ├── glyphicons-halflings-regular.eot...├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff...└── glyphicons-halflings-regular.woff2
└── fonts/ ├── glyphicons-halflings-regular.eot // 字体 （字体图标） ├── glyphicons-halflings-regular.svg...├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
/dist/fonts/glyphicons-halflings-regular.eot", "..../dist/fonts/glyphicons-halflings-regular.svg", "..../dist/fonts/glyphicons-halflings-regular.ttf", "..../dist/fonts/glyphicons-halflings-regular.woff" ], ...
bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot...├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff...└── glyphicons-halflings-regular.woff2 用于生产环境的 Bootstrap即为预编译文件，可以直接使用到任何 web 项目中。...href="#">菜单1 菜单2 菜单3 Glyphicons...字体图标 Bootstrap中包括 250 多个来自 Glyphicons字体图标， 你可以通过它来实现网页中的图标效果。
--字体图标--> ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf... ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 *bootstrap.css
└── bootstrap-theme.min.css.map├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/ ├── glyphicons-halflings-regular.eot... ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff... └── glyphicons-halflings-regular.woff2 基础模板和引入的文件如下 <!
Glyphicons:包括200个符号字体格式图表集合，由Glyphicons提供，Glyphicons Halflings 一般是收费的，但是经过Bootstrap和Glyphicons作者之间的协商...如下是部分Glyphicons内容： ? 利用这几种图标内容，我们引入下面几种样式就可以了。...对于Glyphicons来说，它的样式定义也是很类似的，如下所示。 ?
遇到的问题 1.当我们在resources目录下，创建fonts文件夹，把Bootstrap所需要的glyphicons-halflings-regular.ttf、glyphicons-halflings-regular.woff...、glyphicons-halflings-regular.woff2字体格式文件拷贝进来。
. ├── css │ ├── bootstrap.css │ ├── bootstrap.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot...│ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff...│ └── glyphicons-halflings-regular.woff2 └── js ├── bootstrap.js └── bootstrap.min.js 也有类似正则匹配的选项
Font Awesome（一个字体文件包含了所有的字形图标，只为Bootstrap设计）来显示不同的图标和符号，fonts文件夹包含了4类的不同格式的字体文件： Embedded OpenType (glyphicons-halflings-regular.eot...) Scalable Vector Graphics (glyphicons-halflings-regular.svg) TrueType font (glyphicons-halflings-regular.ttf...) Web Open Font Format (glyphicons-halflings-regular.woff) 建议将所有的字体文件包含在你的Web应用程序中，因为这能让你的站点在不同的浏览器中显示正确的字体
. ├── css│ ├── bootstrap.css│ ├── bootstrap.min.css├── fonts│ ├── glyphicons-halflings-regular.eot...│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff...│ └── glyphicons-halflings-regular.woff2└── js ├── bootstrap.js └── bootstrap.min.js 还可以使用简单的
│ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot...│ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff...│ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js
│ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot...├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff...└── glyphicons-halflings-regular.woff2 Bootstrap 源码 Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
