前端开发难免遇到很多地方需要图片来展示,以往我们都会使用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. java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet解决

    spring配置之后启动报错,如下: java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServl ...

  2. 序列化_Transient

    要实际的操作一下Serialize的代码Demo, 加深理解(某投行很喜欢问这个问题):transient关键字虽然目前还没有人面试过我,但是也是个考点

  3. Android 异步加载数据 AsyncTask异步更新界面

    官方文档:     AsyncTask enables proper and easy use of the UI thread. This class allows to perform backg ...

  4. Java并发-UncaughtExceptionHandler捕获线程异常信息并重新启动线程

    Java并发-UncaughtExceptionHandler捕获线程异常信息并重新启动线程 一.捕获异常并重新启用线程 public class Testun { public static voi ...

  5. 11. 标准库浏览 – Part II

    第二部分包含了支持专业编程工作所需的更高级的模块,这些模块很少出现在小脚本中. 11.1. 输出格式 reprlib 模块为大型的或深度嵌套的容器缩写显示提供了 :repr() 函数的一个定制版本: ...

  6. PAT 1033 旧键盘打字(20)(20 分)

    1033 旧键盘打字(20)(20 分) 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在2 ...

  7. jquery源码学习

    1,"use strict"; //16行   用在代码开始处,表示之后的代码将按照严格模式执行

  8. iOS.NS_DEPRECATED_IOS

    如何处理被NS_DEPRECATED_IOS标记的selector, 例如:类 AVAudioSession中有: - (BOOL)setPreferredHardwareSampleRate:(do ...

  9. Intellij idea 系列教程之常用配置项

    Intellij idea 系列教程之常用配置项 Intellij idea 系列教程目录(https://www.cnblogs.com/binarylei/p/10347600.html) Lan ...

  10. match

    //清空数据match (n) detach delete n (一)查询节点1.查询所有节点 //查询数据库中的所有节点 match(n)return n 2.查询带有某个标签的所有节点 //查询数 ...