前端字体图标的使用（阿里、icomoon）

阿里字体图标使用

首先去阿里图标库官网：http://www.iconfont.cn/
搜索需要的图标库 ——>加入购物车——>点击购物车——>添加到项目（如果有项目直接加入需要的项目，没有则新建项目）
在”图标管理” 中可以查看我的项目

1、Unicode方式在项目中进行使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体图标使用</title><style>/*第一步：在样式里面申明字体* */@font-face {font-family:'iconfont';  /* project id 551814 */src:url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot');src:url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.woff') format('woff'),url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.ttf') format('truetype'),url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.svg#iconfont') format('svg');}.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;}</style></head><body><i class="iconfont">&#xe628;</i></body>
</html>

2、Font class方式在项目中进行使用

引入样式表<link rel="stylesheet" href="http://at.alicdn.com/t/font_619016_c52q8qlz6avsfw29.css">

使用<i class="icon iconfont icon-31dianpu"></i><i class="icon iconfont icon-gongnengjianyi"></i>

这样就可以看到效果了！

注意：Unicode方式，当每次在图标库内加入新的标签时，需要重新copy 项目生成的在线链接@font-face，否则新的图标将会无效； Font class 在使用的时候要添加icon iconfont两个属性

icomoon字体图标使用

首先去icomoon图标库官网：https://icomoon.io/app/#/select
选择你需要的图标，同时页面会有其他的一些功能，自己可以摸索

选择完成后，会有selection（个数），同时点击右边的Generate Font按钮进行下载

点击Download下载

把压缩包里面的fonts拷贝到你的项目
使用icomoon字体图标，打开压缩包的demo.html，选择你需要的图标

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">@font-face {font-family:'icomoon';src:url('../fonts/icomoon.eot?q0tv6r');src:url('../fonts/icomoon.eot?q0tv6r#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?q0tv6r') format('truetype'), url('../fonts/icomoon.woff?q0tv6r') format('woff'), url('../fonts/icomoon.svg?q0tv6r#icomoon') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}div{font-family:"icomoon";}</style></head><body><div ></div></body></html>

注意：src: url地址与你的项目保持一致

效果显示

前端字体图标的使用（阿里、icomoon）相关推荐

字体图标库-如何使用-icomoon
目录如何将字体图标运用到网页制作中如何向字体图标文件中追加新的图标为了使html效果更加美观,我们通常会引入字体图标来辅助我们,下面我姐介绍字体图标的使用方法如何将字体图标运用到网页制作中方 ...
好用的字体图标插件：阿里图标库（iconfont）
最开始网页中的小图标,多以img形式展示 ,当有大量的小图标时,会制作雪碧图,来减少请求量:类似这种~ 很繁琐,当有hover效果,还要更换图片.字体图标用的就方便多了. 所谓的字体图标,是以font ...
前端字体图标,2D变形,以及渐变的使用
一.字体图标下载字体图标(了解) 字体图标的选择,上传 UI美工她们来做的,我们了解即可. 使用字体图标(重点) 引入相关文件(前提) 复制相关的文件,到 fonts文件夹里面. 引入 css & ...
字体图标使用教程阿里字体图标iconfont 鲸鱼编程
官方网址 iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/ 注册并登陆寻找自己喜欢的图标添加首次使用新建一个项目生成代码需要点一下生成后的结果使用字 ...
前端字体图标的使用总结
有时候我们业务中会遇到需要字体图标的场景比如同一个图标在不同的地方显示不同的颜色,这个时候使用字体图标就很适合,这个场景我遇到了好几次. 使用字体图标的两种方式: 1.让设计给出图标的svg文件,上传 ...
web前端字体图标下载
icomoon字库icmoon字库阿里iconfont字库阿里iconfont字库使用方法https://www.bilibili.com/video/BV1pE411q7FU?p=256 ![在 ...
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
如何使用IcoMoon字体图标
如何使用IcoMoon字体图标一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
如何使用阿里云字体图标教程
为什么要使用? 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行&q ...

前端字体图标的使用（阿里、icomoon）

阿里字体图标使用

icomoon字体图标使用

前端字体图标的使用（阿里、icomoon）相关推荐

最新文章

热门文章