对此基本上有三种方法。
- 简单的方法
如果您只使用几个图标。https://fonts.google.com/icons https://fonts.google.com/icons允许您将每个图标下载为 svg 或 png 文件。所以你可以轻松地使用它们Image
瓦丁的组成部分。
- 轻量方法,将其用作字体
Vaadin 网站上有一个培训视频,描述了与应用程序主题和样式相关的各种内容,在 19:30 时间戳处有一章介绍如何配置自定义字体:
https://vaadin.com/learn/training/v14-theming https://vaadin.com/learn/training/v14-theming
材质图标只是一种字体,您可以将其包含在您的项目中。
将 webfont 文件放在例如“src/main/webapp/fonts/MaterialIcons”(注意如果你有Spring Boot jar打包的项目位置会不同)并导入生成的css
@StyleSheet("context://fonts/MaterialIcons/materialicons.css")
其中materialicons.css内容例如:
@font-face {
font-family: 'MaterialIcons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
开发人员体验并不是最好的,因为您需要使用字符代码来使用图标,例如“搜索”图标接缝为“e8b6”等。因此,设置 a 的文本内容span
or div
并定义元素的 css 以使用材质字体图标。
span.getElement().getStyles().set("font-family","MaterialIcons");
- 将其创建为附加包
如果您需要在多个项目中使用多种字体,那么这是值得的。
FontAwesome 的附加包已经存在。这很好地展示了如何构建此类附加组件。替换字体资源很简单,需要更多的工作来生成枚举的图标名称列表,以便有更直观的 Java API 来使用图标。似乎有该字体的标准代码点文件https://github.com/google/material-design-icons/tree/master/font https://github.com/google/material-design-icons/tree/master/font因此,可以使用与 FontAwesome 附加项目中类似的脚本。
https://github.com/FlowingCode/FontAwesomeIronIconset https://github.com/FlowingCode/FontAwesomeIronIconset