如何导入自定义图标 Mendix

拉塞尔·海特
2016 年 8 月 3 日
分钟阅读

我上次在开发者网站上看到，请求量第二大的项目是将自定义图标导入建模器。从外观上看，似乎只需添加字体就可以了。所以我认为展示如何使用纯 CSS 来实现这一点会很有帮助，这样我们作为一个社区就可以为将来将其添加为一项功能奠定基础 Mendix 版本。通过了解如何创建您自己的自定义图标，您可以在比建模者允许当前字形图标放置的更多位置添加图标。

要向任何项目添加自定义图标集，需要两个核心元素、一个图标字体和一个映射所有类的 CSS/Sass 文件。

图标字体

选择或创建您的图标字体：

互联网上有相当多的免费图标字体。有些像 Font Awesome 是免费的，并且几乎可以使用包含 CSS 的字体文件。有些只是字体文件，而另一些则是 SVG 或 illustrator 文件。让我们从最自定义的选项开始：您有一些想要在项目中使用的 svg 图标。为此，您需要在以下网站上创建自己的图标字体： Icomoon.

以下是一些教程带你了解从头开始创建自己的图标字体。通过创建您自己的图标字体，您不仅会得到一个可立即使用的字体，而且还会为您映射具有必要类的 CSS 文件。

您需要的文件：

创建图标字体后，您需要确保字体具有多种字体文件类型。您需要这些文件类型，以便它适用于每个浏览器。例如，.eot 最适合 Internet Explorer，而 .woff 最适合 Chrome。幸运的是，您可以使用 Font Squirrel 的字体转换器来创建所有这些文件。将字体文件保存在 css 文件夹旁边的文件夹中，以便于文件路径。

字体松鼠

CSS/SASS 文件和字符映射

如果您找到了图标字体并创建了所有必要的字体文件，但您不是在 Icomoon 等服务中创建的，那么下一步可能会有点繁琐。这正是我们作为一个社区可以互利共赢的地方。

对于每个图标字体集，您都应该创建每个图标 CSS 文件，我们需要 3 个元素。对于下面的示例，我将使用 Sass 语法，以便它可以连接到 Mendix UI 框架，我将使用 Linearicons，一种清晰的图标字体。

首先，使用 @font-face 导入字体文件。语法如下：

@font-face {
font-family: 'Linearicons-Free';
src:url('../fonts/Linearicons-Free.eot?w118d');
src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),
url('../fonts/Linearicons-Free.woff?w118d') format('woff'),
url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),
url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');&nbsp;font-weight: normal;
font-style: normal;
}

其次，创建一个类来声明你正在使用的字体，并设置基线样式，如字体大小、显示、定位、行高等。对于 Linearicons，我使用的是 .lnr 类。在大多数情况下，当使用带有 Mendix，您会希望图标位于文本或按钮之前，这就是您需要将属性放在 :before 伪类上的原因。这样，您可以使用多种图标字体，它们都有唯一的命名类名。

.lnr {
&amp;:before {
display: inline-block;
font-family: 'FontAwesome';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
vertical-align: middle;
margin-right: 0;
margin-top: 0;
font-size: 1.5em;
line-height: inherit;
-moz-osx-font-smoothing: grayscale;
}
}

最后，您需要为每个字符创建类名。图标字体通常会预定义大部分内容。每个字符都应该有一个类名。