先去注册个号码,好像只可以用新浪微博登录哈,搞一个微博去。

第一就是点上面图标库,选择官方和所有都行。

恩接着点一个图标,他就自己跑到 第二个按钮哪里去了,在点第二个按钮,会出来一个创建项目,随便创建一个就好。

上图不说话

下载本地这个 大家都会把我就不解释了哈,别问我 怎么不和照片一样,我之前就给那个项目里面加了好几个图标,你的只有一个图标是正确的。

恩然后就得到了这么多文件,然而我们只要我红色框里面圈到的文件就好

现在我们把 我们要得到的东西都得到了,然后就是 你自己写html了:

第一步:使用font-face声明字体

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg') format('svg'); /* iOS 4.1- */
}

第二步:定义使用iconfont的样式

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

第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">3</i>

第一步那些代码全部复制粘贴到你的css文件,嗯嗯,上面说到 要的那四个文件 你找一个地方存着,看后缀eot和woff和ttf和svg后缀的,对于上面的吧路径弄对,弄就是搞的意思。然后把第二部全部也复制在css里面,那个 .inconfont 那个class名字,你给你的i标签class用什么名字第二部就用什么名字。当然在第二部那个inconfont里面也可以加color颜色啊,font-size改变大小啊 都可以的哈。第三部i标签里面放的那个代码就是第四张图 下面的那个代码,那个代码就能出来图标 恩 OK了,完美不,快大声喊完美

inconfont 字体库应用的更多相关文章

  1. 如何给CentOS安装字体库

    很多时候,我们需要做一些图像生成工作(譬如验证码之类的),这时候,我们一般都需要用到系统的字体库.但事情却总非尽善人意,我们所使用的Linux操作系统无法像Windows操作系统那样足够“旗舰”,字体 ...

  2. centos7.0 安装字体库

    最近在centos7.0下用itextpdf将word文档转成pdf时出现字体丢失的情况.网上找了很多资料,各式各样的原因和解决方法.后来经过一番测试发现是centos7.0 minimal没有安装相 ...

  3. CentOS 7 安装字体库 & 中文字体

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效:  如上图可以看出,不仅没有中文字体,连字体 ...

  4. CSS在线字体库,外部字体的引用方法

    目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...

  5. 【转】cocos2d-x使用第三方的TTF字体库

    步骤一:找一个ttf字体库 步骤二:找到这个ttf字体库的真实名称 打开你的应用 "字体册"(MAC OS系统下),如下图操作): 找到了字体库真实名称,那么修改将其真名作为为此新 ...

  6. IOS添加自定义字体库

    1.将需要的字体库xxx.ttf添加到工程中,注意一定要在copy bundle resources中存在,如果没有添加上去 2.在info.plist 文件中添加 fonts provided by ...

  7. Android 使用图标字体库

    首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...

  8. Xcode如何添加字体库--

    1.网上搜索字体文件(后缀名为.ttf,或.odf) 2.把字体库导入到工程的resouce中 3.在程序viewdidload中加载一下一段代码 NSArray *familyNames = [UI ...

  9. Cocos2d-x教程(28)-ttf 字体库的使用

    欢迎增加 Cocos2d-x 交流群: 193411763 转载请注明原文出处:http://blog.csdn.net/u012945598/article/details/37650843 通常为 ...

随机推荐

  1. AxureRP7.0各类交互效果汇总帖(转)

    了便于大家参考,我把这段时间发布分享的所有关于AxureRP7.0的原型做了整理. 以下资源均有对应的RP源文件可以下载. 当然 ,其中有部分是需要通过完成解密游戏[攻略]才能得到下载地址或者下载密码 ...

  2. Hibernate 和 快照

    Hibernate我们已经学了四天,该讲的知识我们已经讲完,明天放假,后天练习一天就要结束hibernate的学习,有点不舍的,想来hibernate也不是传说中的那么难,在次将hibernate中三 ...

  3. session应用----登录验证小案例

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. Servlet部分细节介绍

    1 Servlet与线程安全    因为一个类型的Servlet只有一个实例对象,那么就有可能会出现一个Servlet同时处理多个请求,那么Servlet是否为线程安全的呢?答案是:"不是线 ...

  5. Android自动化压力测试之Monkey Test 异常解读(五)

    monkey结果分类 monkey结果详细解读 monkey运行log输出后,得读懂日志内容,定位错误 lgo日志顺序输出分别为  测试命令信息.随机事件流(11种事件).异常信息(anr.crash ...

  6. hive中大表join

    排序存储数据至BUCKETS,这样可以顺序进行join

  7. c++ 常数后缀说明

    1.数值常数有:整型常数.浮点常数:    2.只有数值常数才有后缀说明:    3.数值常数后缀不区分字母大小写.    (1)整型常数的表示形式有:十进制形式.以0开头的八进制形式.以0x开头的十 ...

  8. dreamwaver cs6 主题配色方案

    这是css代码效果 这是js效果 这是html效果 使用方法:1.将下列代码自制到一个文本文档中,将文档命名为Colors.xml. 2.将Colors.xml放到C:\Users\tom\AppDa ...

  9. poj1745 dp

    题目链接:http://poj.org/problem?id=1745 类似的题目之前写过一个差不多的(链接:http://www.cnblogs.com/a-clown/p/5982611.html ...

  10. canvas 3D运动球效果 多球

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...