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

时间: 2024-10-11 14:42:51

ionic项目中使用自定义图标的相关文章

ionic项目中使用自定义图标打包出现错误-broken import

添加自定义字体图标 在src目录下新建icon文件夹,把字体文件放进去.然后在theme/variables.scss中后面添加以下内容,注意把相应位置替换成你自己的: 1 $iconfont-path: "../assets/icon"; 2 3 @font-face { 4 font-family: "iconfont"; 5 src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046'); /* IE9*/

在Eclipse中JFrame自定义图标可以显示,但是导出JAR之后无法显示

在我的项目中,一开始我使用这种方式构造图片路径,然后将其设置到JFrame中即可以显示自定义图标 String imagePath = System.getProperty("user.dir") + "/image/icon.png";// 构造图片的路径 Image imageIcon = Toolkit.getDefaultToolkit().getImage(imagePath); jFrame.setIconImage(imageIcon); 项目路径如下

ionic2中使用自定义图标

在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解压,打开文件demo_unicode.html可以看到它提供的使用方法,我们在ionic2中按照以下方法使用: 1.在项目的assets目录下新建fonts文件夹,然后将下载解压后的iconfont.woff.iconfont.ttf.iconfont.svg.iconfont.eot添加到font

style.css项目中的自定义款式用来覆盖Bootstrap中的一些默认设置

这里有两个关键点,其间"bootstrap.cssBootstrap中的根本款式文件,只需运用Bootstrap就必需调用这个文件.而 bootstrap-responsive.css则能够依据你喜好来挑选,假如想让项目具有呼应式规划的作用,就必需求调用这个款式文件,并且调用必需遵从先后顺序,bootstrap-responsive.css必需放置在bootstrap.css以后,不然便不具有呼应式规划功用.而最终的style.css项目中的自定义款式,用来覆盖Bootstrap中的一些默认设置

ionic项目中实现发短信和打电话

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic-sms-and-call/ 最近做的一个ionic项目中需要实现发短信和打电话,总结了一下遇到的问题和实现的方法. 1.关于打电话 在html中可以很方便的实现拨打电话先在config.xml中添加: <access origin="tel:*" launch-external="yes"/> 然后在html中这样写:

Visual Studio 2008项目中WinForm窗体图标显示为类图标,只能打开代码而无法打开视图问题解决

背景: 今天打开一个Winform项目的时候,图标显示为类文件的样子而不是窗体的样子,在代码中右键也没有View Designer选项,双击图标打开的是代码而非窗体设计界面,百度后也没有找到解决方案. 解决方法(不一定通用): 1.编译项目查看有没有错误. 2.查看WinForm窗体继承的窗体文件可以打开不?有没有问题 3.签出代码,在undocheckout,编译,查看是否可以了 4.查看该项目有没有被其他人签出,如果被签出,让他们签入,再获取一下最新版本代码,编译,看看是不是可以了(我在这一

Ionic项目中使用极光推送-android

对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin 插件,也有相关的实现实例:GitHub地址 ,但是使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用(自己也没有试可不可以). 于是选择国内的消息推送服务,主要有:百度云推送,腾讯信鸽,极光推送,yunba 等等,其中只有极光推送官方提供了phonegap/cordov

AngularCli项目中添加字体图标(Font)详解

本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 二 SVG图标转Font 三 将Font文件合入AngularCli项目 四 创建Font.less 五 引用和使用字体图标 六 后续更新字体图标 参考资料&内容来源 原文地址:https://www.cnblogs.com/zhaoweikai/p/9957105.html

如何在项目中使用icon-font 图标字体

icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ ? 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon Library:如图所示: 选择好需要的图标后点击右下角的Generate Font生成图标,生成后download下来,下载好的文件会包含fonts文件夹和css文件.demo.html文件,把fonts文件夹和css文件引入到项目中,css文件需要根据项目路径做相应的字体路径更改,然后在你