将自定义图标添加到 Intel XDK 上的 Ionic Framework

Question

请寻找可以指导我如何将自定义图标添加到离子框架的教程或解释。尝试了很多使用自定义图标但是无法理解框架如何利用图标来使用它们。

Answer 1

您可以在从 Icomoon, Fontello 或类似网站生成的项目中添加自己的图标，包括自定义字体。

您可以从这些站点下载包含字体文件（ttf、svg 等）和相关 CSS 文件的包。通常他们还提供 demo.html.

通常需要自定义 CSS 以避免与 Ionicons 重叠。例如 CSS 可能类似于以下内容：

@font-face {
    font-family: 'myicons';
    src:url('../fonts/myicons.eot');
    src:url('../fonts/myicons.eot') format('embedded-opentype'),
        url('../fonts/myicons.ttf') format('truetype'),
        url('../fonts/myicons.woff') format('woff'),
        url('../fonts/myicons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon-camera:before {
    font-family: 'myicons';
    content: "\e607";
}
.icon-video-camera:before {
    font-family: 'myicons';
    content: "\e608";
}
.icon-price-tag:before {
    font-family: 'myicons';
    content: "\e609";
}

将自定义图标添加到 Intel XDK 上的 Ionic Framework

Add custom Icons to Ionic Framework on Intel XDK

icons

ionic-framework