可以使用Bootstrap 框架的 glyphicon 类,可以基于项目的 Bootstrap 来免费使用Glyphicons Halflings 提供的图标库。 查看可以使用的图标列表https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm 字体图标(Glyphicons) 添加图标使用示例
在 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
一、Glyphicons 字体图标 1、所有可用的图标 见https://v3.bootcss.com/components/#glyphicons 2、如何使用 出于性能的考虑,所有图标都需要一个基类和对应每个图标的类
/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
图片.png Glyphicons Halflings 官方网址:http://glyphicons.com/ http://v3.bootcss.com/components/ 描述:Glyphicons 为了表示感谢,希望你在使用时尽量为 Glyphicons 添加一个友情链接 使用案例: ?
/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
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
' 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
└── 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'); /* 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
/dist/fonts/glyphicons-halflings-regular.eot", ". /dist/fonts/glyphicons-halflings-regular.svg", ". /dist/fonts/glyphicons-halflings-regular.ttf", ". /dist/fonts/glyphicons-halflings-regular.woff" ], ...
--字体图标--> ├── 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 用于生产环境的 Bootstrap即为预编译文件,可以直接使用到任何 web 项目中。 href="#">菜单1
└── 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字体格式文件拷贝进来。
│ ├── 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.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 和图标字体文件,并且还有
. ├── 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 也有类似正则匹配的选项