引用图标库到自己页面

之前网上看到别人的页面,总发现很多icon都是有一个引用的库,一直不是很清楚,怎么去引用,今天经过同事的指引终于明白了,发现引用图标库,方便很多,以此记录一下,方面查阅

第一步:你需要确定一下你的页面都需要用哪些图标,然后   打开该http://www.iconfont.cn 这是一个人阿里巴巴的字体图标库,然后搜素你需要的字体图标,例如‘首页’等

第二步:查看符合自己需要风格的图标,然后鼠标移入,会有一个购物车形状的图标点击就可以加入购物车了

第三步:重复上面的操作,加入所有你需要的字体图标

第四步:等所有图标添加完之后,点击右上角的购物车,就会看到如下界面,点击添加至项目,你可以添加到之前项目,也可以新建项目,项目名称可以和你本地的项目名称一样,然后点击确定

第五步:接下来就比较关键了,页面会跳到一个你的项目图标的页面

第六步:你可以下载到本地,然后解压文件,把解压的文件放到你的项目目录下,然后在文件中引入

<link rel="stylesheet" href="css/iconfont.css">这个地址是根据你放入项目的地址决定的最后直接在文件中引入css类名就可以,这里说一下这里引入的css类名就是下面图片里面的名字

第七步:这里声明一下,在你引入你的类名之前,必须也要引入“iconfont”这个类名

第八步:你也可以查看在线链接,会生成一个在线的链接,你引入就可以了,类名和上面一样用到哪个加上就可以了

这就是生成的图标,如果要该颜色,直接修改css中‘color‘,大小修改  font-size就可以了

总的来说是方便很多,而且还很容易修改!!!

原文地址:https://www.cnblogs.com/kingsnowcan/p/snow_icon.html

时间: 2024-10-08 09:37:21

引用图标库到自己页面的相关文章

如何合并两个图标库

http://blog.csdn.net/crystal6918/article/details/52994393 最近在项目中碰到了要合并两个icon库的需求:我们项目本来用的是bootstrap提供的glyphicons,但是现在需要用一个别的库的icon,想把这两个库合并在一起供项目使用,研究了一番后整理个教程吧~ 利用https://icomoon.io/app/#/select 这一工具进行这两种图标库的合并,操作步骤如下: 导入图标库 点击页面左上角的import icons,分别导

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

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

Rails使用图标库技巧

网页中经常需要使用一些小图标,这里我们想使用Font Awesome这个图标库里的图标,我们可以到rubygems.org查看是否有人将该图标库封装成gem使得我们使用更加敏捷 在rubugems搜索结果如下: 然后在结果页面点击"源代码": 来到源代码的github页面,我们按照Readme来操作: 然后执行命令bundle 进行安装(执行bundle install也一样) 安装完gem要重启服务器 ? 要引用该gem还得在application.css中添加引用如下: ( 如果不

vue中引入.svg图标,使用iconfont图标库

阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <

基于HTML5的开源图标库-ECharts

ECharts: 来自百度商业前端数据可视化团队,基于html5 Canvas,纯Javascript图表库,底层依赖ZRender,商业产品常用图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.图表类型支持折线图(区域图).柱状图(条状图).散点图(气泡图).K线图.饼图(环形图).雷达图(填充雷达图).和弦图.力导向布局图.地图,同时支持任意维度的堆积和多图表混合展现. 链接是:h

2017.4.7 图标库Font Awesome的使用

1.Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小. 2.你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在你的 HTML 头部增加下列代码即可: <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css

字体图标库使用方法

一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www.bootcss.com/p/cikonss/ 以第一个链接网站里的字体为例 选择自己需要图标,点击右下角下载下来 继续点击右下角--点击下载 然后下载的文件一般都是这几个基本部件 把fonts文件夹复制到自己的项目中根目录中 打开css文件 把代码复制到自己的某个css文件中,然后html引用,重点

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

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之前只包括官方图标库和所有图标库,现在改版又多了个多色图标库,这个暂时没用过,用过再来讲,这里我一般都选所有图标库. 点进去之后在上面有一个搜索框,可以输入关键字搜索