html 字体图标库,阿里字体图标库介绍及图标字体的使用方法

阿里字体图标库介绍及图标字体的使用方法，很多前端或者网页爱好者可能早就用过字体图标，2016年了网页中使用图标字体如果你还没听说过或者很陌生，那你就要赶快看看这篇阿里字体图标库使用介绍了。

这篇文章只讲阿里字体图标库的使用，暂不讲图标制作，阿里矢量图标库上的字体图标已经很多了，几乎项目中需要的图标大部分都能找到。

字体图标的好处：字体图标是矢量的，可以无限放大不模糊，可以通过改变字体颜色color来改变图标颜色，再也不用做图片雪碧图了，换图标的话，如果保持名字和编码不变的话，就不用更改css或者类名，有这几个好处就有足够的理由来使用字体图标库了

先来看个图标库页面截图

步骤一、阿里图标库的网址：http://www.iconfont.cn/ 进入首页，选择微博账号登录

步骤二、点击导航上的“图标库”选择图标库，然后选择自己看中的图标

步骤三、点击看中的图标以后，图标会被收入到右上角你账号的右边盒子里

步骤四、点开盒子，选择存储为新项目还是老项目中去，保存完以后会直接进入到第五步

步骤五、从顶部导航上的图标管理，可以进入自己的图标项目页面，

步骤六、在图标项目页面，可以编辑你的图标

主要是编辑图标占这个区域的大小范围，移动图标等，图标的名字特别重要，一定要给字体图标起个好名字，要不然一个烂的名字，出现在你的网页中，如果你有强迫症的话会很郁闷的。

步骤七、可以下载图标，也可以引用在线图标

我还是喜欢下载过来，一般情况下，图标字体是不能跨域使用的，一定要跨域是需要做些配置，暂且不提。

步骤八、那就是如何在网页中使用了，

第一步：使用font-face声明字体

@font-face {font-family: 'iconfont'

src: url('iconfont.eot'); /* IE9*/

src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('iconfont.woff') format('woff'), /* chrome、firefox */

url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

第二步：定义使用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;}

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

如果不能直观的知道字体图标啥样子了，就打开字体包中的demo.html看一看，你要登录阿里字体库网站项目中查看也可以。

注意：谷歌浏览器不能直接打开demo.html查看到字体图标，需要在服务器环境下才可以，我用的webStorm在预览html的时候，就类似于一个web服务器

↓ 查看全文

html 字体图标库,阿里字体图标库介绍及图标字体的使用方法相关推荐

图标绘制入门1：简单介绍及图标设计规范
在开发过程中,难免少不了各种图标,赏心悦目的UI界面需要优秀的图标设计.不过老是找设计师画图也不好,一次两次可以,次数多了人也是会烦的.所以自力更生吧,做一个全能全栈的程序员. 选择图标绘制软件在u ...
字体相关样式/ fontawesome库/阿里iconfont库的使用方法
1.字体相关样式: 1.1 color 用来设置字体颜色 1.2 font-size 字体的大小, 和font-size相关的单位 em 相当于当前元素的一个font-size rem 相对于根元素的 ...
【干货#002】小程序开发最佳图标库:阿里图标库
概述为了提高小程序的颜值,你是不是还在苦苦搜索漂亮的图标或自己撸呢?今天我们介绍一个来自阿里妈妈的神奇图标库网站,从此妈妈再也不用担心小程序图标了. iconfont+(http://www.ico ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
vue中使用element-ui 图标和阿里字体图标结合使用
vue中使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...
怎么对阿里iconfont两个项目中的字体图标合并
1.把下载下来的2个文件夹都放入项目中 2.如要把iconfont2文件夹中的字体图标合并到iconfont文件夹中,则如下图,修改iconfon2文件夹下左侧该图标的五个文件名,同时修改这个文件夹中 ...
html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
android 字体文件压缩,Android创建assets文件夹并使用字体图标（Icon Font）
首先我们要知道如何在AS中新建引用assets文件 1.将项目切换到Project模式 Project.png 2.要注意assets文件夹要跟Java文件在同一目录下,都包含在main的文件下面. ...
IPAD移动端交互原型通用设计方案、ipad元件库、移动元件库、元件列表、设计元件、交互示例、界面模板、设备模板、手势图标、社交界面、音乐、电商、视图控制器、指示器、指纹解锁、手势解锁、rp元件库
IPAD移动端交互原型通用设计方案.ipad元件库.移动元件库.元件列表.设计元件.交互示例.界面模板.设备模板.手势图标.社交界面.音乐.电商.视图控制器.指示器.指纹解锁.手势解锁.rp元件库.平 ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...

html 字体图标库,阿里字体图标库介绍及图标字体的使用方法

html 字体图标库,阿里字体图标库介绍及图标字体的使用方法相关推荐

最新文章

热门文章