前端开发难免遇到很多地方需要图片来展示,以往我们都会使用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_7.2库存管理

    package demo1; import java.util.ArrayList; import java.util.Scanner; public class Demo1 { public sta ...

  2. MVC中的七层架构

    工厂模式的七层架构 1.创建Model,实现业务实体. 2.创建IDAL,实现接口. 3.创建DAL,实现接口里的方法. 4.创建DBUtility,数据库操作类5.创建DALFactory,抽象工程 ...

  3. go语言中常用的文件和文件夹操作函数

    package main; import ( "os" "log" "time" "fmt" ) //一些常用的文件操作 ...

  4. Socket(转自 阿里云)

    摘要:Socket-C/S Socket又称"套接字",应用程序 通常通过"套接字"向网络发出请求或者应答网络请求,使主机间或者一台计算机上的进程间可以通讯. ...

  5. c# 软件绑定网卡mac的实用

    一:网上搜c# 绑定网卡Mac 有好多信息,其中有篇分为几种方法获取mac 的方法,结果获得到的是一个list 队列的信息,信息获取到所有的物理网卡,无线网卡,蓝牙,隧道的网卡物理地址.对与软件绑定物 ...

  6. Oracle_PL/SQL(3) 游标

    引言:PLSQL数据类型标量数据类型:数字类.字符类.日期类.布尔类(boolean).复合数据类型:记录(%rowtype).表.数组引用类型:REF CURSORLOB类型:BLOB.CLOB 1 ...

  7. spring/spirng boot添加fluent日志-aop

    此项目以aop的形式添加fluent 日志 sample介绍 spring-mvc-aop-helloworld 为spring mvc aop condition toolcommontest 为s ...

  8. andorid 进度条和图片的透明度

    layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  9. phpstorm的安装和使用

    1下载phpstorm #下载地址 https://www.jetbrains.com/phpstorm/ 2激活并安装 create associations 表示的是以后编辑选择的文件也默认用id ...

  10. 第五周Java学习总结(补)

    第五周java学习内容(补) 学习内容: File类方法的操作 public String getName() public boolean canRead() public boolean canW ...