如何利用iconfont图标代替小图片
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图标代替小图片的更多相关文章
- 如何使用iconfont字体代替小图片?
我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...
- CSS Sprite小图片自动合并工具
css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值.这里介绍一些自动合并图片并生成样式的工具. NodeJS ...
- 如何使用IconFont字体图标代替网页图片?
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- 利用python3.x实现小爬虫下载贴吧内图片
Hi, I'm back. 寒假在家只有一台笔记本,也懒得把台式机上的键盘拆下来用,因此编程被我暂时搁置,转而在网易云课堂上学了一下Python.可惜的是云课堂的Python教程是基于Python ...
- [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...
- 利用dedecms给近三天(或当天)发布的文章显示红色日期或加上new字或new小图片
1)红色日期 <br>[field:pubdate runphp='yes'] <br>$a="<font color=red>".strfti ...
- icon-font图标介绍
前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- 分享:录制gif小图片工具
今天博主分享一个录制gif小图片的工具[LICEcap]: 有的时候,图片解释起来不够直观,如果是一段小动画,别人一看就懂了. 工具我放在百度网盘上面,当然也可以自己在网上下载. 下载地址:http: ...
随机推荐
- luogu3233 世界树 (虚树)
反正肯定要建虚树,考虑建完之后怎么做 先随便dp一下算出来距离某点最近的询问点mi[x](因为有的虚树上的点它不是询问点嘛) 那我们对于某条链x到fa[x]上的非虚树上的点(包括他们的非虚树上的孩子) ...
- Codeforces1096G Lucky Tickets(NTT优化dp)
设\(f[i][j]\)表示填了\(i\)个数,数位和为\(j\)的方案数 于是方程为: \[f[i][j]=\sum_{k=0}^9 f[i-1][j-k]*[CanUse[k]==1]\] 其中\ ...
- LOJ#510 北校门外的回忆(找性质+倍增+线段树)
这题一场模拟赛我们出了弱化版(n<=1e6),抄题面给的程序能拿到71分的好成绩 其实后面的29分是加了几个1e9的数据卡人 这糟老头子真是坏得很 正解我们机房看了三天 在这里感谢这篇题解的作者 ...
- jackson json转对象 对象转json
一,Jackson使用示例 第1步:创建ObjectMapper对象. 创建ObjectMapper对象.它是一个可重复使用的对象. ObjectMapper mapper = new ObjectM ...
- luogu2643 聪聪可可
题目链接 题意 其实转化之后的题意就是求出树上有多少条路径长度是3的倍数.求答案的时候只要将这个数字除以总路径数量就行了. 思路 考虑点分治.对于当前子树,分别求出出树中每个点到根的路径长度对\(3\ ...
- C#两个实体之间相同属性的映射
public static R Mapping<R, T>(T model) { R result = Activator.CreateInstance<R>(); forea ...
- (转)java中引用传递和值传递
https://blog.csdn.net/javazejian/article/details/51192130 https://www.cnblogs.com/perfy/archive/2012 ...
- SetCapture() & ReleaseCapture() 捕获窗口外的【松开左键事件】: WM_LBUTTONUP
今天在窗口上绘图的时候,遇到一个问题:在特殊情况下,当用户在窗口中按下鼠标左键,然后移动到窗口外松开鼠标左键,这时程序中只能捕获到 WM_LBUTTONDOWN(按下) 和 WM_MOUSEMOVE( ...
- react-native中的props
效果图 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性). 以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的 prop 来指定 ...
- vue.js自定义组件directives
自定义指令:以v开头,如:v-mybind. <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value ...