inconfont 字体库应用
先去注册个号码,好像只可以用新浪微博登录哈,搞一个微博去。
第一就是点上面图标库,选择官方和所有都行。
恩接着点一个图标,他就自己跑到 第二个按钮哪里去了,在点第二个按钮,会出来一个创建项目,随便创建一个就好。
上图不说话
下载本地这个 大家都会把我就不解释了哈,别问我 怎么不和照片一样,我之前就给那个项目里面加了好几个图标,你的只有一个图标是正确的。
恩然后就得到了这么多文件,然而我们只要我红色框里面圈到的文件就好
现在我们把 我们要得到的东西都得到了,然后就是 你自己写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 字体库应用的更多相关文章
- 如何给CentOS安装字体库
很多时候,我们需要做一些图像生成工作(譬如验证码之类的),这时候,我们一般都需要用到系统的字体库.但事情却总非尽善人意,我们所使用的Linux操作系统无法像Windows操作系统那样足够“旗舰”,字体 ...
- centos7.0 安装字体库
最近在centos7.0下用itextpdf将word文档转成pdf时出现字体丢失的情况.网上找了很多资料,各式各样的原因和解决方法.后来经过一番测试发现是centos7.0 minimal没有安装相 ...
- CentOS 7 安装字体库 & 中文字体
前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体 ...
- CSS在线字体库,外部字体的引用方法
目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...
- 【转】cocos2d-x使用第三方的TTF字体库
步骤一:找一个ttf字体库 步骤二:找到这个ttf字体库的真实名称 打开你的应用 "字体册"(MAC OS系统下),如下图操作): 找到了字体库真实名称,那么修改将其真名作为为此新 ...
- IOS添加自定义字体库
1.将需要的字体库xxx.ttf添加到工程中,注意一定要在copy bundle resources中存在,如果没有添加上去 2.在info.plist 文件中添加 fonts provided by ...
- Android 使用图标字体库
首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...
- Xcode如何添加字体库--
1.网上搜索字体文件(后缀名为.ttf,或.odf) 2.把字体库导入到工程的resouce中 3.在程序viewdidload中加载一下一段代码 NSArray *familyNames = [UI ...
- Cocos2d-x教程(28)-ttf 字体库的使用
欢迎增加 Cocos2d-x 交流群: 193411763 转载请注明原文出处:http://blog.csdn.net/u012945598/article/details/37650843 通常为 ...
随机推荐
- AxureRP7.0各类交互效果汇总帖(转)
了便于大家参考,我把这段时间发布分享的所有关于AxureRP7.0的原型做了整理. 以下资源均有对应的RP源文件可以下载. 当然 ,其中有部分是需要通过完成解密游戏[攻略]才能得到下载地址或者下载密码 ...
- Hibernate 和 快照
Hibernate我们已经学了四天,该讲的知识我们已经讲完,明天放假,后天练习一天就要结束hibernate的学习,有点不舍的,想来hibernate也不是传说中的那么难,在次将hibernate中三 ...
- session应用----登录验证小案例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Servlet部分细节介绍
1 Servlet与线程安全 因为一个类型的Servlet只有一个实例对象,那么就有可能会出现一个Servlet同时处理多个请求,那么Servlet是否为线程安全的呢?答案是:"不是线 ...
- Android自动化压力测试之Monkey Test 异常解读(五)
monkey结果分类 monkey结果详细解读 monkey运行log输出后,得读懂日志内容,定位错误 lgo日志顺序输出分别为 测试命令信息.随机事件流(11种事件).异常信息(anr.crash ...
- hive中大表join
排序存储数据至BUCKETS,这样可以顺序进行join
- c++ 常数后缀说明
1.数值常数有:整型常数.浮点常数: 2.只有数值常数才有后缀说明: 3.数值常数后缀不区分字母大小写. (1)整型常数的表示形式有:十进制形式.以0开头的八进制形式.以0x开头的十 ...
- dreamwaver cs6 主题配色方案
这是css代码效果 这是js效果 这是html效果 使用方法:1.将下列代码自制到一个文本文档中,将文档命名为Colors.xml. 2.将Colors.xml放到C:\Users\tom\AppDa ...
- poj1745 dp
题目链接:http://poj.org/problem?id=1745 类似的题目之前写过一个差不多的(链接:http://www.cnblogs.com/a-clown/p/5982611.html ...
- canvas 3D运动球效果 多球
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...