Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

nickking 2019-06-25

使用阿里巴巴矢量图标库Iconfont

系列教程看这里
Ionic2入门教程(一)安装和环境配置
Ionic2入门教程(二)进阶配置:Android打包
ionic2入门教程(三)高仿网易公开课(1)
ionic2入门教程(四)解读目录结构
ionic2入门教程(五)如何使用IonicPage
ionic2入门教程(六)地图服务(谷歌、高德、百度定位)
ionic2入门教程(七)来一个五星评分
ionic2入门教程(八)高仿网易公开课(2)
ionic2入门教程(九)样式修改和主题切换
Ionic2入门教程(十)如何debug一个Ionic应用
Ionic2入门教程(十一)制作一个视频背景欢迎页

Ionic自己的图标库:http://ionicframework.com/doc...
也很多了,但是有时候还是不够用,或者说不够适合,那么我们可以用阿里的矢量图标库,来使图标的使用更加灵活,同时也能很方便的使用彩色图标,为app添加一抹亮色~有些图标真的很可爱啊~

0、效果图

Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

1、注册账号

官网:http://www.iconfont.cn

2、选择适合的图标加入项目

先选几个加到购物车~

Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

因为图标是按项目分组的,生成的链接和下载生成的css或js都是按你这个项目决定的,所有图标在一个项目的话,就在一个文件里,是方便我们后期使用~

不过一开始就随便建个项目好了~

3、查看在线链接、点击生成

Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

分为Unicode、Font class 、Symbol三种类型,其中前两种是纯色,后一种是彩色~

4、在线

1.Unicode

第一步:拷贝项目下面生成的font-face、在css中添加

@font-face {
  font-family: 'iconfont';  /* project id 462633 */
  src: url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.eot');
  src: url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.svg#iconfont') format('svg');
}

第二步:定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步:挑选相应图标并获取字体编码,应用于页面

<ion-icon class="iconfont" color="secondary">&#xea0a;;</ion-icon>

####2.Font class
第一步:拷贝项目下面生成的fontclass代码,在index中link
http和https都可以~

<link rel="stylesheet" href="https://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.css">

第二步:挑选相应图标并获取类名,点击图标,复制代码,应用于页面:
<ion-icon class="iconfont icon-Apple" color="secondary"></ion-icon>

3.Symbol

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个svg的集合。
特点如下:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

第一步:拷贝项目下面生成的symbol代码,在index.html里加入:

<script src="http://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.js"></script>

第二步:在SCSS加入通用css代码(引入一次就行):

.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-Android"></use>

</svg>

5、离线、点击下载至本地

Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

文件夹内容如下,点击每个demo的html会告诉你用法,其实和上面完全一样:

Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

我们需要的是iconfont.css和iconfont.js

Ionic2入门教程(十二)使用阿里巴巴矢量图标库Iconfont

将这两个文件复制到项目内、在index.html内引入

<link rel="stylesheet" href="./assets/icon/iconfont.css">
  <script src="./assets/icon/iconfont.js"></script>

注释掉之前的即可

<link rel="stylesheet" href="https://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.css">
  <script src="http://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.js"></script>

6、源码

https://github.com/JiaXinYi/I...

如果对你有帮助的话欢迎star和fork噢~

相关推荐

ganyouxianjava / 0评论 2012-05-31