1.首先 你要有一个阿里巴巴矢量图这个网站的账号:http://www.iconfont.cn/ 在这里注册哦~

2.蓝后 可以在首页搜索你想要的图标,比如 我想放一个管理员的图标在页面上:

就要点击这个小车车 把你想加的图标添加入库,然后你就可以在右上角的小车里找到它,点击打开然后选择添加到项目。

加入之后 会进入这个界面

3.然后点击查看在线链接,会生成这么一段代码

点此复制代码 复制下来~~

4.然后再定义使用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;} 5.最后
挑选相应图标并获取字体编码(就是上面小图下面的编码),应用于页面:
<i class="iconfont"></i>

完美。

如何利用iconfont图标代替小图片的更多相关文章

  1. 如何使用iconfont字体代替小图片?

    我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...

  2. CSS Sprite小图片自动合并工具

    css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值.这里介绍一些自动合并图片并生成样式的工具. NodeJS ...

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

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

  4. 利用python3.x实现小爬虫下载贴吧内图片

    Hi, I'm back.   寒假在家只有一台笔记本,也懒得把台式机上的键盘拆下来用,因此编程被我暂时搁置,转而在网易云课堂上学了一下Python.可惜的是云课堂的Python教程是基于Python ...

  5. [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题

    Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...

  6. 利用dedecms给近三天(或当天)发布的文章显示红色日期或加上new字或new小图片

    1)红色日期 <br>[field:pubdate runphp='yes'] <br>$a="<font color=red>".strfti ...

  7. icon-font图标介绍

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

  8. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  9. 分享:录制gif小图片工具

    今天博主分享一个录制gif小图片的工具[LICEcap]: 有的时候,图片解释起来不够直观,如果是一段小动画,别人一看就懂了. 工具我放在百度网盘上面,当然也可以自己在网上下载. 下载地址:http: ...

随机推荐

  1. luogu3292 幸运数字 (点分治+线性基)

    首先第一眼是一个倍增套线性基,但是$O(Qlog^2Vlog^N)=10^{10}$的复杂度... 即使是st表也只是变成了$O(Nlog^2Vlog^N)$啊 考虑点分治,相对于倍增显著减少了线性基 ...

  2. bzoj1047/luogu2216 理想的正方形 (单调队列)

    开b组单调队列,分别维护此时某一列中的最大/最小值 然后我每次把它们的头取出来,塞到维护行的单调队列里,就是n*n的最大/最小值 #include<bits/stdc++.h> #defi ...

  3. One Person Game ZOJ - 3329(期望dp, 数学)

    There is a very simple and interesting one-person game. You have 3 dice, namely Die1, Die2 and Die3. ...

  4. Paint the Wall ZOJ - 2747

    点数很多,坐标值很大,然后离散化一下用一个点表示一小块的面积对应的颜色,然后更新的时候一块一块更新,查询的时候一块一块查询 #include<map> #include<set> ...

  5. nuxt.js实战之用vue-i18n实现多语言

    一.实现步骤 1.安装vue-i18n并且创建store.js(vuex状态管理)文件 2.创建一个(middleware)中间件,用来管理不同的语言 3.创建不同语言的json文件作为语言包(例如: ...

  6. CF1107

    我哭了......什么鬼题我怎么都不会...果然教育场是教我做人的... 打的虚拟赛,286名...太菜了.EF都是可做题我都没写出来...G题大水题我居然没看... B:设g(i) = i的各位数字 ...

  7. Linux命令模拟Http的get或post请求

    Http请求指的是客户端向服务器的请求消息,Http请求主要分为get或post两种,在Linux系统下可以用curl和wget命令来模拟Http的请求. get请求: 1.使用curl命令: cur ...

  8. bzoj3829 POI2014 FAR-FarmCraft

    题目链接 思路 用\(f[i]\)表示完成第\(i\)棵子树所需要得时间. 考虑如果有两个子树\(a\)和\(b\),如果先去完成子树\(a\),那么对于花费得时间就是\(f[b] + siz[a] ...

  9. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  10. ajax-----readyState总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...