引用阿里云矢量图标库

1.登陆http://www.iconfont.cn/  例如我需要购物车的图标

2.按下回车后会出现一堆的购物车图标

3.喜欢那个一个就鼠标移动到图标上去,加入购物车

4点击加入购物车后,就会出现在右上角的购物车

5.点击右上角的购物车,点击下载代码

7.把下载的代码,加压到本地,  三个html文件,您可以打开看下里面有相关的教程

8.引入方法有三种

    第一种的特点

  • 兼容性最好,支持ie6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

    

第一步:拷贝项目下面生成的font-face

  @font-face { font-family: ‘iconfont‘; src: url(‘iconfont.eot‘); src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), url(‘iconfont.woff‘) format(‘woff‘), url(‘iconfont.ttf‘) format(‘truetype‘), url(‘iconfont.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; }

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

<i class="iconfont">3</i>

注意如果您把下载出来的字体库分开放,需要在CSS中改变引入的路径才可以

例如我把需要引入的CSS放在了新建的CSS代码中,把其他的文字库文件放在font文件夹中

把以上需要引入的CSS样式放在了

font中放的是字体库需要的格式

那么我就需要在index.css中改变我引入的文字库的路径  需要把这五个的url改为您自己存储文字库的文件夹即可

第二种使用方法

font-class引用

  

与unicode使用方式相比,具有如下特点:

  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

    

第一步:引入项目下面生成的fontclass代码:

第二步:挑选相应图标并获取类名,应用于页面: 必须要加iconfont  icon-denglu2是您引入图标的类型,具体您可以参考您下载下来的HTML中参考

第三种使用方式

symbol引用

  这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

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

    

第一步:引入项目下面生成的symbol代码:

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

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

时间: 2024-10-14 16:07:34

引用阿里云矢量图标库的相关文章

阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)

继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库),还支持自己上传,关键还能生成你项目专用的CDN,速度不言而喻,支持国产.下面引用介绍 转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具) 使用SVG来代替Web Iconfont(图形字体化) 从最开

php大力力 [037节] Iconfont-阿里巴巴矢量图标库

Iconfont-阿里巴巴矢量图标库 从此不求人:自主研发一套PHP前端开发框架 Iconfont-中国第一个最大且功能最全的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具 www.iconfont.cn/ 从300到300万,一个远程外包团队的发展历程和经验 PHP检测url地址是否被百度收录 thinkphp实现excel数据的导入导出(修改适用3.2.3)H5编辑后台 thinkphp实现excel数据的导入导出(修改适用3.2.

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

1,打开阿里巴巴矢量图标库 http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1 2,选择需要的图标加入购物车: 3,将购物车中的图标加入本地项目: 第一种方法: (1)获取在线链接,将获取到的在线链接复制到编辑器css文件: (2)<i class="iconfont">unicode<i/><i class="ico

简单介绍一下阿里巴巴矢量图标库的使用

相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完全免费的,可以在线使用也可以下载到本地使用,而且图标是作为字体插入,不仅可以改变颜色大小,而且在布局方面也非常方便.下面我就来介绍一下阿里巴巴矢量图标库Iconfont. 网址:http://www.iconfont.cn/plus Iconfont之前只包括官方图标库和所有图标库,现在改版又多了个多色图标库,这个暂时没用过,用过再来讲,这里我一般都选所有图标库. 点进去之后在上面有一个搜索框,可以输入关键字搜索

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

首先百度阿里巴巴矢量图标库hhhh 然后找到在搜索框里搜索你要用的图标的形容词,然后找到心仪图标后加入购物车 加入项目之后会是这样 点击那个点此生成,把生成的代码放进你的css文件里去,在下面加上 .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:

阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配

前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于是我们经过交流之后决定使用阿里巴巴适量图标库,这是我们第一次使用,也顺便把经验分享给大家,希望可以对一些前端有所帮助. 首先我们需要找到这个网站https://www.iconfont.cn/ 打开之后看到的首页大概是这个样子: 里面有搜索框,首先先是UI来找图标设计,里面图标大都是免费的,而且样式

vue 项目中使用阿里巴巴矢量图标库iconfont

原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图标库) image.png 3.把需要的图标添加到购物车 image.png 4.打开购物车并选择添加至项目,然后确定 image.png 5.这时候可以在项目中看到你选中的svg图标,这时候可以点击下载至本地 image.png 6.打开下载的zip包就可以看到里面的文件,将下面几个文件取出 im

配置阿里云maven中央库

1 <mirrors> 2 <mirror> 3 <id>nexus-aliyun</id> 4 <mirrorOf>*</mirrorOf> 5 <name>Nexus aliyun</name> 6 <url>http://maven.aliyun.com/nexus/content/groups/public</url> 7 </mirror> 8 </mirro

Iconfont矢量图标平台全面升级

阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师png透明图标下载教程:http://v.youku.com/v_show/id_XNjMxNTgwMzU2.html 矢量图标视频教程:http://v.youku.com/v_show/id_XNjM0MzQ4ODMy.html iconfont官方微博:http://weibo.com/icon