模板简介
模板使用简要说明
主题配色及保存
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
点击侧边栏刷新
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本子页面内新建TAB
iframe中操作当前Tabs
iframe页面内的loading
多标签页(Multitabs)插件说明
关于multitabs的一些调整
调整左侧的宽度
webuploader使用时候的问题
关于模板的默认主题或者配色
关于模板的字体图标问题
关于版权和商业用途
模板中固有的插件
1
光年模板的loading和消息(v3)
2
rangeSlider滑块(v3)
3
bootstrap-datepicker日期(v3)
4
bootstrap-datepicker日期(v4)
5
bootstrap-datetimepicker日期时间(v3)
6
bootstrap-datetimepicker日期时间(v4)
7
perfect-scrollbar滚动条
8
Chart.js图表
9
bootstrap-colorpicker颜色选择
10
jquery-confirm对话框
11
jquery.tagsinput标签
12
bootstrap-notify消息(v4)
13
chosen.jquery关联选择
14
jquery.bootstrap.wizard向导
15
clockpicker时间选择(v4)
16
bootstrap-maxlength长度验证(v4)
17
bootstrap-select下拉选择(v4)
18
fullcalendar日程(v4)
19
bootstrap-table表格插件
插件项目包含插件
1
Date Range Picker时间段选择
2
material风格时间选择器
3
dropzone上传
4
uploadify上传
5
webuploader上传
6
H5图片上传
7
cropper图片裁剪
8
ckeditor富文本编辑器
9
editor.md编辑器
10
summernote富文本编辑器
11
tinymce富文本编辑器
12
ueditor富文本编辑器
13
wangeditor富文本编辑器
14
bootstrap-validate表单验证
15
jquery-validate表单验证
16
bootstrap-select下拉选择
17
bootstrap-selectN联动
18
bootstrap-lyear-select下拉
19
select2下拉
20
bootstrap-multiselect下拉多选
21
lyear-dropdowntree下拉树状
22
ZTree树形菜单
23
treeview树状插件
24
jstree树状结构
25
imgVer拼图滑块
26
sliderVerification滑块验证
27
bootstrap3-dialog模态框
28
layer弹窗
29
jquery.auto.complete自动填充
30
fixedheadertable固定表头
31
fontIconPicker图标选择
32
fullcalendar日程
33
jQuery Raty评分
34
lyear.loading加载
35
Bootstrap MaxLength长度验证
36
jquery.toolbar弹出式工具栏
37
jquery.bootstrap-touchspin输入框微调
插件项目包含示例
1
表单布局示例
2
聊天页面示例
3
logo处使用文字
4
模态框中使用Tab选项卡
5
模态框最大化
6
顶部消息示例
7
搜索布局
8
搜索布局2
9
搜索布局3
10
侧滑边栏区域
11
选择示例
12
选择示例2
13
选择示例3
14
代码演示切换
15
留言列表布局
16
数据统计布局
17
产品价格布局
18
搜索框
19
用户头像篇
20
动画篇
21
其他篇
22
另一种侧边栏菜单
关于模板的字体图标问题 - 光年模板说明文档 - 笔下光年
网站首页
关于模板的字体图标问题
### 字体图标说明 这里首先先说明下,光年模板使用的字体图标是 `Material Design Icons`,`Bootstrap 3.3.7` 自带的 `Glyphicons` 字体图标已经删除,后面的插件整合项目里有用到的也已经改过。 光年项目中使用了该字体的两个版本,3的版本使用字体 `MaterialDesign-Webfont-master-2.0.6`,而4使用的是 `MaterialDesign-Webfont-master-4.1`。这个大家需要注意,避免不同版本之间的 css 和 font 字体混用。 ### 遇到的问题 很多小伙伴在实际使用项目过程中,会遇到字体图标不显示的问题(具体表现为本该有图标的地方显示成了一个 “口” 字的样子)。 遇到图标不显示的问题,首先可以按f12查看浏览器是否报错,一般会有两种情况: 1. css 加载路径错误,浏览器显示 css 文件404 2. css 加载路径正确,浏览器显示 woff,ttf 等字体文件404 如果是遇到上面两种情况,解决也很简单,保证自己的 css 文件和 font 字体文件的路径正确即可。 针对于2,在IIS中,可能会遇到有部分的字体图标提示 `net::ERR_ABORTED` 的情况。 有可能是IIS服务器中没有配置MIME类型,增加一下即可。(参考:https://www.cnblogs.com/ggll611928/p/8391626.html) 当你的css文件和font文件都加载正确的时候,图标还是无法显示正常。如果你是java项目,那么可以考虑是否字体文件是否被过滤掉,在配置里面新增不过滤woff,ttf等文件。 ### 实际案例 这里以群里小伙伴的实际项目(`SpringBoot`)为例: 在登录页面,无法显示用户名、输入密码、验证码旁边的图标。 最开始定位到的是 `materialdesignicons.min.css` 文件,考虑到css文件加载成功,提示的是woff等字体的 `net::ERR_ABORTED`,经过询问,在css里面的字体路径中,去掉 `?v=2.0.46` 浏览器就不再提示报错(路径中的这个并不是必须的)。 ``` @font-face { font-family: "Material Design Icons"; src: url("../fonts/materialdesignicons.eot?v=2.0.46"); src: url("../fonts/materialdesignicons.eot?#iefix&v=2.0.46") format("embedded-opentype"), url("../fonts/materialdesignicons.woff2?v=2.0.46") format("woff2"), url("../fonts/materialdesignicons.woff?v=2.0.46") format("woff"), url("../fonts/materialdesignicons.ttf?v=2.0.46") format("truetype"), url("../fonts/materialdesignicons.svg?v=2.0.46#materialdesigniconsregular") format("svg"); font-weight: normal; font-style: normal } ``` 但是页面图标依然没有加载出来,在询问过具体路径正确的情况下,这位小伙伴也提到代码中制作了用户的一些拦截,这才考虑到是一个资源拦截的问题 百度了一下这方面的解决方案,最后大家可以参考下: https://blog.csdn.net/qq_43575217/article/details/118051727 在pom.xml添加下面这段代码(`Material Design Icons` 字体有五种格式的字体文件) ``` <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <configuration> <nonFilteredFileExtensions> <nonFilteredFileExtension>ttf</nonFilteredFileExtension> <nonFilteredFileExtension>woff</nonFilteredFileExtension> <nonFilteredFileExtension>woff2</nonFilteredFileExtension> <nonFilteredFileExtension>svg</nonFilteredFileExtension> <nonFilteredFileExtension>eot</nonFilteredFileExtension> </nonFilteredFileExtensions> </configuration> </plugin> ``` 这里是已经取消了 css 文件中字体文件路径里的版本信息 `?v=2.0.46`,如果有这个的情况下,在配置中新增 `<version>2.0.46</version>`
上一篇:
关于模板的默认主题或者配色
下一篇:
关于版权和商业用途
阅读设置
字体大小
小号 (14px)
标准 (16px)
大号 (18px)
超大 (20px)
特大 (24px)
阅读主题
默认
护眼模式
夜间模式
古卷模式
恢复默认
确定