今天用iconfont遇到了字体图标的使用问题。关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样)

首先你要分清是用单个字体图标icon,还是多个字体图标icon

关于使用代码的下载方式(一般都是使用多个字体图标)

单个字体图标icon:

一:搜索你想要的字体图标:

二:添加到图库

三:下载代码

下载该图标库的代码到本地,代码包括demohtmlcss文件、iconfontcssjs以及各种字体文件,demo是使用说明,iconfont文件是使用这个图标库所必须的文件,可根据使用的具体方式引用相应文件

四:运用下面的使用方式介绍三种方式的随便一种

多个字体图标icon:

一:同上搜索你想要的字体图标,添加到中如下图:

二:接着点击进入如下画面

三:点击添加到项目中,会出现下图这样的界面

四:如果还没有创建过项目,则点击+号添加项目,然后点击确定。进入下图

五:然后你就可以点击下载到本地,这样完之后你想要的图标就都有了。然后你用下面使用方式介绍的随便一种就可以展示你想要的字体图标了。


使用方式介绍  (出自iconfont官网帮助中的代码应用

方式一:unicode使用

  unicode是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持ie6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
  • 注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

unicode使用步骤如下:

第一步:拷贝项目下面生成的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>

方式二:font-class的使用

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

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

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

使用步骤如下:

第一步:拷贝项目下面生成的fontclass代码:

<link rel="stylesheet" type="text/css" href="./iconfont.css">/*引用上面下载的代码*/

第二步:挑选相应图标并获取类名,应用于页面:

<i class="iconfont icon-xxx"></i>


方式三:symbol引用

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

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

使用步骤如下:

第一步:拷贝项目下面生成的symbol代码:

<script src="./iconfont.js"></script>/*引用上面下载的代码*/

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

<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
转载请注明出处: http://www.cnblogs.com/Fence-Zzy/p/8109977.html

关于iconfont字体图标的使用的更多相关文章

  1. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  2. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  3. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  4. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  5. mpvue——引入iconfont字体图标

    前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...

  6. iconfont字体图标

    1.1.进入阿里图标网站 http://www.iconfont.cn/ 1.2.在购物车里添加自己需要的字体图标 1.3.下载代码 1.4.解压过后,找到iconfont.css,放在你的项目里,需 ...

  7. Android iconfont字体图标的使用

    1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使 ...

  8. iconfont字体图标的使用方法

    转载于https://www.cnblogs.com/hjvsdr/p/6639649.html 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了 ...

  9. 小程序入坑(一)---如何引入iconfont 字体图标

    最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.c ...

随机推荐

  1. 2017 年终总结 & 2018 年度计划

    不立几个 Flag,都不知道怎么作死 2017 年度计划完成情况: 1.健身时间不少于350天:  未完成 中断了22天,实际运动 343天   2.至少每个月看一本书:  及格 <切尔诺贝利的 ...

  2. openldap 搭建

    环境构建 1)软件安装: yum -y install openldap-servers openldap-clients openldap openldap-devel migrationtools ...

  3. [Python学习] Django 权限控制

    本文为大家讲解 Django 框架里自带的权限模型,从理论到实战演练,带领大家了解 Django 里权限是怎么一回事. 一.主要内容 1.什么是权限管理? 2.Web 权限 3.Django 权限机制 ...

  4. [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)

    一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...

  5. vim 查找的技巧

    vim查找时如果有多个特殊字符需要转义容易出错还繁琐. 要确保要查找的 URL 仍保存在寄存器 u 中.然后,我们输入 / 或者 ? 调出查找提示符,二者均能正确工作.最后,要依次输入原义开关 \V ...

  6. Appium Mac 命令行安装

    试过很多方法都失败,打算用命令行方式安装. 准备工作: 从 https://github.com/appium/appium下载appium版本的源码(.tar) 详见github_Appium1.6 ...

  7. Windows程序设计学习笔记(四)自绘控件与贴图的实现

    Windows系统提供大量的控件供我们使用,但是系统提供的控件样式都是统一的,不管什么东西看久了自然会厌烦,为了使界面更加美观,添加一些新的东西我们需要自己绘制控件. 控件在默认情况下并不进行自绘,如 ...

  8. 使用MSHTML解析HTML页面

    最近在写一个爬虫项目,本来打算用C/C++来实现,在网上查找有关资料的时候发现了微软的这个MSHTML库,最后发现在解析动态页面的时候它的表现实在是太差:在项目中需要像浏览器那样,执行JavaScri ...

  9. 使用JavaScript 操作本地文件

    一.显示用户选择文件[图片] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. 基于PDO的简易ORM

    #基于PRO的一个简单地ORM GitHub 项目地址 #在用原生写脚本的时候怀念起框架中封装好的ORM,所以仿照laravel写了这个简洁版的ORM,可以链式操作. #实现功能 ###条件函数 ta ...