• ionic项目中使用自定义图标


    原文:http://bbs.phonegap100.com/forum.php?mod=viewthread&tid=3941&ordertype=1

    ionic自带图标库地址:http://ionicframework.com/docs/v2/ionicons/。由于项目需要,自带图标库可能无法满足需求,此时就需要加载第三方图标库。
    这里推荐阿里巴巴矢量图标库:http://www.iconfont.cn/


    1. 搜索想要使用的图标,并添加入库

    2. 点击右上角的购物车图标,查看添加的图标

    3. 添加至项目,此时需要登录,项目名称随意

    4. 下载

    5. 在Ionic中使用

    Ionic2项目结构解析中,我们知道可以把一些全局样式添加在 src/app/app.scss 中,资源文件可以放在 src/assets。

    在 assets 下新建文件夹 myFont,打开下载好的图库文件,将iconfont.woff、iconfont.ttf、iconfont.svg、iconfont.eot添加到文件夹 myFont。

    打开图库文件中的iconfont.css,将代码添加到 src/app/app.scss 并修改路径

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    @font-face {
        font-family: "Ionicons";
        src: url('../assets/myFont/iconfont.eot?t=1481782193096'); /* IE9*/
        src: url('../assets/myFont/iconfont.eot?t=1481782193096#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../assets/myFont/iconfont.woff?t=1481782193096') format('woff'), /* chrome, firefox */
        url('../assets/myFont/iconfont.ttf?t=1481782193096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('../assets/myFont/iconfont.svg?t=1481782193096#iconfont') format('svg'); /* iOS 4.1- */
    }

    .icon {
        display: inline-block;
        font-family: "Ionicons";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .ion-md-weixin:before,
    .ion-ios-weixin:before,
    .ion-ios-weixin-outline:before {
        content: "e603";
    }



    Note:
    1. 修改font-family为Ionicons(为了不影响原来图标的使用)
    2. 定义ios时要多定义一个outline

    此时在页面中使用一下代码,即可显示微信图标

    1 <ion-icon name="weixin"></ion-icon>



    修改 src/pages/tabs/tabs.html 如下:

    1
    2
    3
    4
    5
    <ion-tabs>
        <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="weixin"></ion-tab>
        <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
        <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
    </ion-tabs>



    运行项目,即可看到更改后的图标内容

    经验证,ionic3项目也适用。
     
    另外可参考:https://segmentfault.com/a/1190000009288336
  • 相关阅读:
    1373:鱼塘钓鱼(fishing)
    1261:【例9.5】城市交通路网
    1259:【例9.3】求最长不下降序列
    1260:【例9.4】拦截导弹(Noip1999)
    1258:【例9.2】数字金字塔
    1261:【例9.5】城市交通路网
    1260:【例9.4】拦截导弹(Noip1999)
    1259:【例9.3】求最长不下降序列
    1257:Knight Moves
    [HAOI2008]硬币购物(动态规划、容斥、搜索)
  • 原文地址:https://www.cnblogs.com/zhouXX/p/7604710.html
走看看 - 开发者的网上家园