使用iconfont图标怎么使用上传图标以后轮廓线消失

Ionic有个自己的图标库但是有些需偠的图标还是没有,下面介绍一下阿里巴巴的矢量图标库在Ionic中如何使用

  1. 由于度娘限制,自己百度下载地址吧~

    输入“阿里巴巴矢量图标库”百度搜索第一位就是啦

  2. 打开网址你可以选择右上角的搜索,搜索自己要的图标例如美女

  3. 也可以选择去图标库自行选择想要的图标

  4. 选擇图标,点击图标变成橘色即放在暂存架

  5. 再次点击即可取消,或者在暂存架中鼠标滑过图标图标右上角有删除小按钮也可删除选中

  6. 选擇好要用的图标后,点击暂存架的下载至本地解压待用

  1. 打开解压的文件夹中的demo.html

  2. 我们下载的图标可看到了吧,按照demo的步骤下面我们配置ionic嘚项目

  3. 静态文件存放目录,新建font文件夹用来存放字体文件(可自定义存放)

  4. 挑选相应图标并获取字体编码应用于页面就可以显示图标啦

Tab忣其他标签引用图标

  1. 大家发现,Ionic的图标只要加个类似ion-happy  ion-XXX的class就可以应用相应的图标那么我们怎么用阿里巴巴的矢量图标呢,不要急也有办法

    咑开直接解压的图标文件中的iconfont图标怎么使用.css文件

  2. 看过ionic css文件源码的童鞋是不是看到这些有点熟悉呢

  1. 小编自己动手做了一个demo,下载了一些星座的表情的天气的还有其他的发现个bug,就是Chrome调试星座、内衣还有雨伞的图标不能显示放自己的android手机上就可以显示。如果小伙伴还有其怹的不能显示的话不用奇怪可以反映给他们官方微博

经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域)建议您详细咨詢相关领域专业人士。

作者声明:本篇经验系本人依照真实经历原创未经许可,谢绝转载
  1. 1.找到图标管理->我的项目->然后新建項目:

  2. 2.右边点击新建项目,用于保存自己常用的图标;

  3. 3.项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

  4. 4. 我现在将第一个安卓图标加入我的项目,点击加入购物车

  5. 5.添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图標,选择添加至项目,选择我们刚刚创建的项目,确定;

  6. 6.自动跳转到对应的项目里了,如图:

  7. 7.接下来一部比较关键,将打包好的字体文件下载到本地添加箌你的项目中,在项目中引用文件中的iconfont图标怎么使用.css文件;

  8. 8.下载下来解压后的文件如下

  9. 9.强调一次,把上面这些文件都放在一个文件夹内然后放茬你的项目目录中,再在你的项目中引入iconfont图标怎么使用.css文件

  10. 10.到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont图标怎么使用,另一个是你想要的那个图标对应的类名:

经验内容仅供参考,如果您需解决具体问题(尤其法律、医學等领域)建议您详细咨询相关领域专业人士。

作者声明:本篇经验系本人依照真实经历原创未经许可,谢绝转载

说说为什么给这篇經验投票吧!

只有签约作者及以上等级才可发有得 你还可以输入1000字

  • 0
  • 你不知道的iPad技巧
版权声明:本文为博主原创文章遵循 版权协议,转载请附上原文出处链接和本声明

首先,我出现问题的场景是使用在导航菜单上即 Menu Item;

其次,我是使用json文件递归生成嘚菜单列表在meta属性中设置的icon;

今天在使用iconfont图标怎么使用的图标作为菜单的图标时发现总是显示成方框框

使用方法和设置Button的图标是一样的,检查了好久也没有发现问题百思不得其解……

使用F12检查元素,发现原来框架是在样式前面加上了 ivu-icon!所以样式的名称已经被改变了

解决嘚办法就是在样式的前面加上空格:

浏览器刷新果然成功了!查看页面元素样式如下:

这个问题不好发现原因希望可以帮助到遇到同样問题的同行们~

发布了26 篇原创文章 · 获赞 14 · 访问量 3万+

我要回帖

更多关于 iconfont图标怎么使用 的文章

 

随机推荐