前端开发难免遇到很多地方需要图片来展示,以往我们都会使用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. 33-Java中的String,StringBuilder,StringBuffer三者的区别

    转载自:https://www.cnblogs.com/su-feng/p/6659064.html StringBuilder 详解 (String系列之2) Java中的String,String ...

  2. elastic5.4安装错误解决

    首先,我们从官网下载:(官网:https://www.elastic.co/downloads/elasticsearch)(推荐下载deb或者rpm包,否则坑很多) 启动 (需要依赖java环境) ...

  3. 运行msckf_vio

     MSCKF_vio是一种基于多状态约束卡尔曼滤波器的双目视觉里程计.其中多状态约束是指将多帧图像的相机位姿加入卡尔曼状态向量中,在进行卡尔曼增益之前通过多帧图像之间的约束进行最小二乘优化来估计特征点 ...

  4. TortoiseSVN设置Beyond Compare为版本比较、差异合并工具

    打开乌龟的setting==>Diff Viewer 比较"D:\develop\Beyond Compare 4\BCompare.exe" %base %mine /ti ...

  5. SqlServer添加触发器不让删除数据

    触发器是:instead of delete 类型,注意了:instead类型的触发器相当于: DELETE命令过来后,直接走触发器中的代码,再往下,没有了…… 就是说,这个触发器会屏蔽掉你所有的DE ...

  6. [中英对照]Introduction to DPDK: Architecture and Principles | DPDK概论: 体系结构与实现原理

    [中英对照]Introduction to DPDK: Architecture and Principles | DPDK概论: 体系结构与实现原理   Introduction to DPDK: ...

  7. linux 使用笔记6

    ---恢复内容开始--- 1.内容追加 把一个文件的内容追加到另一个文件中: cat first.txt >> second.txt//追加到second.txt文件的末端    cat ...

  8. CButtonST|CUniButton等按钮类的使用

    CButtonST CButtonST类的使用参考链接:http://www.cnblogs.com/lidabo/archive/2012/12/17/2821122.html CCeButtonS ...

  9. 【统一异常处理】@ControllerAdvice + @ExceptionHandler 全局处理 Controller 层异常

    1.利用springmvc注解对Controller层异常全局处理 对于与数据库相关的 Spring MVC 项目,我们通常会把 事务 配置在 Service层,当数据库操作失败时让 Service ...

  10. Can I win LT464

    In the "100 game," two players take turns adding, to a running total, any integer from 1.. ...