当前位置：首页 > news >正文

ionic 字体的导入方法

news 来源：原创 2024/4/27 19:15:07

更换字体

这是第一个图标(蜜蜂推荐)是撸主原来的图标

这是UI给的效果图的图标，显然默认的图标不符合要求

查找图标所在的样式，在tabs.html文件中

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!--ion-ios-sunny-outline-->
  <!-- 蜜蜂推荐 -->
  <ion-tab title="蜜蜂推荐" icon-off="ion-ios-star-outline" icon-on="ion-ios-star" href="#/tab/main">
    <ion-nav-bar class="bar-light">
      <!--回退按钮 返回前一个视图-->
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-main"></ion-nav-view>
  </ion-tab>

  <!-- 我的客户 -->
  <ion-tab title="我的客户" icon-off="ion-ios-rainy-outline" icon-on="ion-ios-rainy" href="#/tab/accounts">
    <ion-nav-view name="tab-accounts"></ion-nav-view>
  </ion-tab>

  <!-- 我的账户 -->
  <ion-tab title="我的账户" icon-off="ion-ios-cloudy-outline" icon-on="ion-ios-cloudy" href="#/tab/user_center">
    <ion-nav-bar class="bar-light">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-user_center"></ion-nav-view>
  </ion-tab>

</ion-tabs>

icon-off="ion-ios-star" icon-on="ion-iso-sunny"
ion-ios-star为实体，ion-ios-star-outline为线框
点击时出现过渡

释放鼠标显示的样式为实体

1.用图片代替字体，弊端(点击的时候没有样式)

思路：将字体设置为全透明，后面加背景图，显示出背景图图标

.ion-ios-sunny-outline:before {
  content: "11";
  background-image:url("../img/icon_star_off.png");
  background-repeat: no-repeat;
  background-size: 25px 25px;
  color:rgba(0,0,0,0);
}
.ion-ios-sunny:before {
  content: "11";
  background-image:url("../img/icon_star_on.png");
  background-repeat: no-repeat;
  background-size: 25px 25px;
  color:rgba(0,0,0,0);
}

效果：

点击图标，过渡效果（弊端：没有过渡效果）

释放鼠标效果

2.从字体库找字体替换默认字体(推荐使用)

阿里图标库：阿里图标库
下载后的文件夹

将

四个文件拷贝到你的地址中
复制iconfont.css里面的代码到你的css样式表中，然后在tabs.html中使用它。

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- 蜜蜂推荐 -->
  <ion-tab title="蜜蜂推荐" icon-off="iconfont icon-huodong" icon-on="iconfont icon-7a" href="#/tab/main">
    <ion-nav-bar class="bar-light">
      <!--回退按钮 返回前一个视图-->
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-main"></ion-nav-view>
  </ion-tab>

  <!-- 我的客户 -->
  <ion-tab title="我的客户" icon-off="ion-ios-rainy-outline" icon-on="ion-ios-rainy" href="#/tab/accounts">
    <ion-nav-view name="tab-accounts"></ion-nav-view>
  </ion-tab>

  <!-- 我的账户 -->
  <ion-tab title="我的账户" icon-off="ion-ios-cloudy-outline" icon-on="ion-ios-cloudy" href="#/tab/user_center">
    <ion-nav-bar class="bar-light">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-user_center"></ion-nav-view>
  </ion-tab>
</ion-tabs>

效果：

点击图标，过渡效果（弊端：没有过渡效果）

释放鼠标效果