ionic2中使用自定义字体图标
来源:互联网 发布:js比较字符串大小 编辑:程序博客网 时间:2024/05/29 16:24
使用自定义字体图标的开始是一样的都是在字体图标库生成需要用到的字体图标。步骤如下:
以上我选择过前两个都可以实现(Unicode/Font class都可以)
unicode
最原始的方式,但是兼容性好。fontclass
使用伪元素和css类的方式,与ionic一样,兼容限制ie8+symbol
唯一支持保留颜色的方式,但是兼容性需要考虑(支持svg的设备和浏览器可以)
接下来的两种引用方式:不管是哪种引用方式,CSS样式修改后均放在引用的地方的scss页面内,比如tab页面引用的图标就放Tab页面的SCSS里面,或者直接放在app.scss里面,也就是根组件的scss样式里面
1.直接引用方式:
<i class="iconfont ion-ios-xiaoxi"></i>
直接引用的CSS样式修改:
@font-face {font-family:"iconfont";
src: url('../assets/myFont/iconfont.eot?t=1493867644778');/* IE9*/
src: url('../assets/myFont/iconfont.eot?t=1493867644778#iefix')format('embedded-opentype'),/* IE6-IE8 */
url('../assets/myFont/iconfont.woff?t=1493867644778')format('woff'),/* chrome, firefox */
url('../assets/myFont/iconfont.ttf?t=1493867644778')format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../assets/myFont/iconfont.svg?t=1493867644778#iconfont')format('svg');/* iOS 4.1- */
}
.iconfont{
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'iconfont' !important;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.ion-ios-cust:before,
.ion-ios-xiaoxi:before,
.ion-ios-xiaolian:before,
.ion-ios-xiaolian-outline:before,
.ion-ios-xiaoxi-outline:before,
.ion-ios-cust-outline:before
{
@extend .iconfont;
}
.ion-ios-cust:before {
content: "\e601";
}
.ion-ios-cust-outline:before{
content: "\e601";
}
2.符合ionic的引用方式:
这里需要注意的是1.修改类名字,2.删除下载的iconfont样式让其自动继承ionic默认的样式:
<ion-icon name="smile"></ion-icon>
// 修改font-family名字.注意路径
@font-face {font-family:"Ionicons";
src: url('../assets/tab/iconfont.eot?t=1499857930007');/* IE9*/
src: url('../assets/tab/iconfont.eot?t=1499857930007#iefix')format('embedded-opentype'),/* IE6-IE8 */
url('../assets/tab/iconfont.woff?t=1499857930007')format('woff'),/* chrome, firefox */
url('../assets/tab/iconfont.ttf?t=1499857930007')format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../assets/tab/iconfont.svg?t=1499857930007#iconfont')format('svg');/* iOS 4.1- */
}
// 这部分删掉,让其自动继承ionic默认的icon样式即可
// .iconfont{
// font-family:"iconfont" !important;
// font-size:18px;
// font-style:normal;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// }
.ion-md-smile:before,//注意这里是ion不是icon,每个类名都加上md/ios适配安卓iOS,ios需要多一个outline
.ion-ios-smile:before,
.ion-ios-smile-outline:before {
content: "\e68a";
}
阅读全文
0 0
- ionic2中使用自定义字体图标
- Ionic2 使用自定义图标
- Ionic2像使用字体图标一样使用png图标等
- ionic2 tabs 自定义图标
- android中使用自定义字体以及图标字体
- ionic2 使用自定义icon
- android自定义图标字体的使用
- Ionic2中使用ECharts3
- Ionic2自定义组件的使用
- 自定义字体图标文件
- 自定义字体图标
- 如何在网页中使用字体图标
- Axure中使用图标字体【FontAwesome】
- android中使用iconfont图标字体
- webpack中如何使用iconfont字体图标
- 微信小程序中使用阿里字体图标
- vue项目中如何使用字体图标
- iOS中使用自定义字体
- TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字
- Lucene第二篇【抽取工具类、索引库优化、分词器、高亮、摘要、排序、多条件搜索】
- Android Studio 项目取消 GitHub关联
- 412. Fizz Buzz+String与int类型转化
- 分布式开放消息系统(RocketMQ)的原理与实践
- ionic2中使用自定义字体图标
- 如何在Eclipse或者中删除我们复制的代码中含有的行号
- Android MVP模式
- RPM打包C++程序实例
- Linux命令
- EL&JSTL表达式学习笔记 -- day01
- HDU
- JAVA虚拟机系列(四)
- 【今日荐文】七大有效的编程习惯助你成为更好的程序员---Bartlomiej Karalus