在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";
}