Question

我正在创建我的离子应用程序，这是我的第一个应用程序，我需要在此应用程序中添加我的自定义图标，我在照片商店中删除了我需要的所有图标，然后我通过这种方式使用它们：

.my-star-icon {
  content: url('/img/selected-icon.png');
  width: 22px;
}

我使用标签执行了我的应用导航：

<ion-tabs class="tabs-icon-top" id="tab">

  <ion-tab title="Feed" icon="ion-social-rss"
    href="#/app/feed">
    <ion-nav-view name="feed-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Selected" icon="my-star-icon"
    href="#/app/selected">
    <ion-nav-view name="selected-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Actions" icon="ion-ios-list-outline"
    href="#/app/actions">
    <ion-nav-view name="actions-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Charts" icon="ion-arrow-graph-up-right"
    href="#/app/charts">
    <ion-nav-view name="charts-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="More" icon="ion-more"
    href="#/app/more">
    <ion-nav-view name="more-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

当我添加图标名称我的类它出现在我的导航菜单中，但它工作奇怪，没有焦点和悬停样式不起作用，无法理解为什么，也许我应该以某种方式在我的离子应用程序中下载此图标？

Answer 1

尝试使用此服务

https://icomoon.io/

它提供了容易包含在项目中的css文件和字体

Answer 2

像这样：

  <ion-tab title="Actions" icon="actions" href="#/app/actions">
    <ion-nav-view name="actions-tab"></ion-nav-view>
  </ion-tab>

然后在css中：

.actions{
  background-image: url('/img/actions.png');
 }

/* optional */
.tab-item .icon {
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
}

并在必要时调整尺寸。

Answer 3

//此代码用于在ionic 3中加载自定义图标：// IN app.sccs：

        ion-icon {
  &[class*="custom-"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    width: 1em;
    height: 1em;
  }
  &[class*="custom-profilepac"] {
    // the following commented line is the way to load the icon
    // <ion-icon name="custom-profilepac"></ion-icon>
    background: url(../assets/icon/profilePac.svg);
  }
  &[class*="custom-profile"] {
    // <ion-icon name="custom-profile"></ion-icon>
    background: url(../assets/icon/profilePro.svg);
  }
}

如何在离子框架中上传我的自定义图标？

3 个答案: