html里icone图标移动,Iconfont 在HTML中的使用

一、准备阶段：

a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标，加入购物车

b.点击网页中的购物车下载代码

二、3种方法实现 iconfont 的html显示

unicode 引用

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

兼容性最好，支持 ie6+，及所有现代浏览器。

支持按字体的方式去动态调整图标大小，颜色等等。

但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

使用步骤如下：

第一步：在css代码块或css文件中使用 @font-face 声明字体

@font-face {

font-family: 'iconfont';

src: url('iconfont.eot');

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

url('iconfont.woff2') format('woff2'),

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;

-moz-osx-font-smoothing: grayscale;

}

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



完整代码：

@font-face {

font-family: 'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');

}

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}



注意：css代码块中的 @font-face 内的 src: url('iconfont.eot'); 中的 url 即为之前准备阶段下载的源码文件夹下的对应文件，此处的完整代码的文件路径与 iconfont.eot 在同一目录下，若相应文件不在同一目录下请修改url参数。

实现效果：

2.font-class 引用

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

与 unicode 使用方式相比，具有如下特点：

兼容性良好，支持 ie8+，及所有现代浏览器。

相比于 unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。

因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 unicode 引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码(即为准备阶段下载的代码文件中的iconfont.css文件)重要！！！：

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

3.symbol 引用

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

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。

兼容性较差，支持 ie9+，及现代浏览器。

浏览器渲染 svg 的性能一般，还不如 png。

使用步骤如下：

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

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

.icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentcolor;

overflow: hidden;

}

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

三、效果展示

index.html

 more about

iconfont-style.css

@font-face {

font-family: 'iconfont';

src:url('../fonts/iconfont.eot?-8vg322');

src:url('../fonts/iconfont.eot?#iefix-8vg322') format('embedded-opentype'),

url('../fonts/iconfont.woff?-8vg322') format('woff'),

url('../fonts/iconfont.ttf?-8vg322') format('truetype'),

url('../fonts/iconfont.svg?-8vg322#iconfont') format('svg');

font-weight: normal;

font-style: normal;

}

[class^="icon-"], [class*=" icon-"] {

font-family: 'iconfont';

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;

}

.icon-user-female:before {

content: "\e106";

}

.icon-user-follow:before {

content: "\e064";

}

.icon-user-following:before {

content: "\e065";

}

更多定义的icon此处省略........

引用的 fonts 目录下的文件：

效果图：

更多精彩的效果图展示：