看到支付宝官网,使用很多iconfont-字体图标。素色,纯色,体积小,尝试使用做个demo,以便日后参考使用

============================

<h1>第一个结构插入实现图标</h1>
<i class="icon iconfont"></i>

<h1>第三个css class实现图标</h1>
<i class="iconfont icon-jiaotonglvyou"></i>

============================

@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot'); /* IE9*/  /*这里的路径做了修改对比线上直接下载的*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff') format('woff'), /* chrome, firefox */
url('../font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.icon{
font-size: 42px;
line-height: 100px;
margin: 10px 0;
color:#333;
-webkit-transition: font-size 0.25s ease-out 0s;
-moz-transition: font-size 0.25s ease-out 0s;
transition: font-size 0.25s ease-out 0s;

}
.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;
}

.icon-lvyou:before { content: "\e60a"; }/*这些是作为通过css样式 生成的图标,相比在前面html结构插入,这样便于修改*/
.icon-jiaotonglvyou:before { content: "\e60b"; }
.icon-lvyoubaoicon:before { content: "\e60b"; }

=============

参考网站:http://www.iconfont.cn/

感谢:酱油 993  等群友

预览效果:http://files.cnblogs.com/files/leshao/iconfont-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87.rar

和 http://files.cnblogs.com/files/leshao/iconfont%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87demo.rar

iconfont-字体图标的更多相关文章

  1. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  2. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  3. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  4. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  5. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

  6. mpvue——引入iconfont字体图标

    前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...

  7. iconfont字体图标

    1.1.进入阿里图标网站 http://www.iconfont.cn/ 1.2.在购物车里添加自己需要的字体图标 1.3.下载代码 1.4.解压过后,找到iconfont.css,放在你的项目里,需 ...

  8. Android iconfont字体图标的使用

    1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使 ...

  9. iconfont字体图标的使用方法

    转载于https://www.cnblogs.com/hjvsdr/p/6639649.html 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了 ...

  10. 小程序入坑(一)---如何引入iconfont 字体图标

    最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.c ...

随机推荐

  1. Linux基础学习笔记以及常用命令

    1.windows自带命令进入mysql所在磁盘   2.进入mysql安装目录的bin文件 D:\>cd D:\Program Files (x86)\mysql-5.5.25-winx64\ ...

  2. Android 当打开“开发人员模式”中的“不保留活动”后,程序应当怎么保持正常执行

    Android 当打开"开发人员模式"中的"不保留活动"后,程序应当怎么保持正常执行咧. .? 在这几天,我一直在纠结这个问题.从发现,程序出现这个问题,是由于 ...

  3. bootstarp模板02

    HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

  4. NodeJS+Express+MongoDB

    一.MongoDB MongoDB是开源,高性能的NoSQL数据库:支持索引.集群.复制和故障转移.各种语言的驱动程序丰富:高伸缩性:MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言 ...

  5. java语言实现树

    首先用Node类定义一个节点,用来存储每个节点的内容: public class Node { // 关键字 private int keyData; // 其他数据 private int othe ...

  6. CNN中的卷积操作的参数数计算

    之前一直以为卷积是二维的操作,而到今天才发现卷积其实是在volume上的卷积.比如输入的数据是channels*height*width(3*10*10),我们定义一个核函数大小为3*3,则输出是8* ...

  7. 爬取豆瓣电影储存到数据库MONGDB中以及反反爬虫

    1.代码如下: doubanmoive.py # -*- coding: utf-8 -*- import scrapy from douban.items import DoubanItem cla ...

  8. Jquery 改变样式

    Jquery简单的操作 Jquery 是一个非常好用JS库,有很多的特殊的操作,为了方便,我们都可以引入Jquery. <script src="dist/js/vendor/jque ...

  9. 监听键盘弹起View上调

    可以用三方库IQKeyboardManager 用这个第三方 http://www.jianshu.com/p/f8157895 #pragma mark - keyboard events - // ...

  10. 【Netty】源码分析目录

    前言 为方便系统的学习Netty,特整理文章目录如下. [Netty]第一个Netty应用 [Netty]Netty核心组件介绍 [Netty]Netty传输 [Netty]Netty之ByteBuf ...