前端开发难免遇到很多地方需要图片来展示,以往我们都会使用img、background、font文件实现图片,本人使用bootstrap,但由于前端比较火的bootstrap的font库太少不能满足我们的需求,很多时候我们会使用阿里提供http://www.iconfont.cn/search来寻找图片和自定义iconfont文件



正文

1.登陆http://www.iconfont.cn/search选择图片到购物车







2.生成iconfont代码

点击购物车下载代码[/size]







3.使用





引入生成的 <link rel="stylesheet" href="iconfont.css">
<ul class="icon_lists clear">
<li>
<i class="icon iconfont icon-wode"></i>
<div class="name">我的</div>
<div class="fontclass">.icon-wode</div>
</li> <li>
<i class="icon iconfont icon-wode1"></i>
<div class="name">我 的</div>
<div class="fontclass">.icon-wode1</div>
</li>
</ul>

前端开发利器自定义Iconfont图标的更多相关文章

  1. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

  2. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  3. 前端开发利器 Sublime Text 3 使用技巧和总结笔记

    这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 ...

  4. 前端开发利器VSCode

    最近找到一款非常好用的开发利器,VSCode.一直认为微软做的东西都很一般,这个软件让我刮目相看了. 之前使用webstorm卡的不行,换了这个非常好用. 用着还不错,这里记录下一些使用的心得. VS ...

  5. 前端开发利器 livereload -- 从此告别浏览器F5键

    各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷 ...

  6. [转] 前端开发利器--Brackets 的七种武器和旁门左道

    转自:http://www.jianshu.com/p/ff7798aa4548 Brackets是Adobe开发的web编辑器,是一款免费开源.多平台支持的软件,并在于GitHub上维护.Brack ...

  7. 微信公众号开发C#系列-12、微信前端开发利器:WeUI

    1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...

  8. 前端开发利器-Brackets IDE

    是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...

  9. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

随机推荐

  1. Mysql自定义函数functions时报错

    delimiter && [函数创建语句.....] [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or ...

  2. git查看历史操作

    在提交了若干更新,又或者克隆了某个项目之后,偶尔想回顾下过往提交历史.可以使用git log命令来实现. 最简单的查看提交历史命令如下: $ git log $ git log --oneline $ ...

  3. (八) .launch文件 ---编写简单的启动脚本文件

    下面我们将介绍,如何编写一个启动脚本程序:(.launch文件) 还记得我们在 创建ROS软件包教程 中创建的第一个程序包(beginner_tutorials)吗,现在我们要使用它. 在 begin ...

  4. javascript 的原型与原型链的理解

    javascript中一切皆对象,但是由于没有Class类的概念,所以就无法很好的表达对象与对象之间的关系了. 比如对象A与对象B之间,它们两个是相对独立的个体,互不干扰,对象A修改自身的属性不会影响 ...

  5. Spring Boot学习笔记2——基本使用之最佳实践[z]

    前言 在上一篇文章Spring Boot 学习笔记1——初体验之3分钟启动你的Web应用已经对Spring Boot的基本体系与基本使用进行了学习,本文主要目的是更加进一步的来说明对于Spring B ...

  6. python 虚拟环境操作 virtualenv +virtualenvwrapper

    Window 下创建python的虚拟环境 下载工具 pip install virtualenv 创建虚拟环境目录 # 注意此命令创建的虚拟环境目录是在当前目录下 virtualenv testen ...

  7. Java 和 Javascript的关系

    写这篇文章是因为看到有人问这个问题,在想怎么会有这种SB问题,不过想想当初SB的我貌似也搞不清两者的关系,认知还是需要一个过程. 然后看到比较经典的回答有:Java 和Javascript的关系就像雷 ...

  8. poj 3279 Fliptile(二进制)

    http://poj.org/problem?id=3279 在n*N的矩阵上,0代表白色,1代表黑色,每次选取一个点可以其颜色换过来,即白色变成黑色,黑色变成白色,而且其上下左右的点颜色也要交换,求 ...

  9. A面&B面

    难难难.道是玄,不遇知音不可谈.遇了知音聊两句,免教那枉费舌尖.难得今天心情不错,反思毕业这五年的种种,有浑噩.迷茫.彷徨.莽撞.执着.困顿.不惧,走到今天迈过了几道坎早已忘却,同时也还在询问自己值不 ...

  10. Oracle12c的卸载

    之前电脑装了Oracle12c 现在希望删除重新安装: 参照教程: http://jingyan.baidu.com/article/642c9d34e1cbdd644a46f7de.html E:\ ...