关于模板的字体图标问题

字体图标说明

这里首先先说明下，光年模板使用的字体图标是 Material Design Icons，Bootstrap 3.3.7 自带的 Glyphicons 字体图标已经删除，后面的插件整合项目里有用到的也已经改过。

光年项目中使用了该字体的两个版本，3的版本使用字体 MaterialDesign-Webfont-master-2.0.6，而4使用的是 MaterialDesign-Webfont-master-4.1。这个大家需要注意，避免不同版本之间的 css 和 font 字体混用。

遇到的问题

很多小伙伴在实际使用项目过程中，会遇到字体图标不显示的问题（具体表现为本该有图标的地方显示成了一个 “口” 字的样子）。

遇到图标不显示的问题，首先可以按f12查看浏览器是否报错，一般会有两种情况：

css 加载路径错误，浏览器显示 css 文件404
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>