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 通常为 ...
随机推荐
- office excel 装Visual Studio后报错解决方案
安装完vs后,vs会向office安装COM加载项,但是在启动Excel时会发生弹出此加载项安装出错的消息,如下图. 名称: 从: file:///D:/Program Files (x86)/Mic ...
- 一个json字符串
{ "area": [{ "flag": "Y", "ishot": "N", "lag& ...
- Linux学习笔记(13)权限管理
1 ACL权限 (1)简介和开启方式 ACL(Access Control List)权限的目的是在提供传统的owner.group.others的read.write.execute权限之外的局部权 ...
- 【前台 ajax】web项目前台传递数组给后台 两种方式
项目使用maven springMVC 有需求 将前台的数组 在ajax中 送给后台 方式1: 前台代码:[注意:ajax中的属性---traditional:true, ] 如果Post ...
- js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件
<input type="button" id="btn" value="免费获取验证码" /><script type= ...
- Android 蹲坑的疑难杂症集锦一
各位看官老爷子你们好,我就是那个挖坑不埋,还喜欢开新矿的小喵同志. 问大家一个问题,在Github上找项目的时候,看到中文简介说明你们是不是觉得这个项目很low不屑一顾? 最近朋友无意中说,在Gith ...
- html php 重定向 跳转 刷新
1秒后跳转 法一: <!DOCTYPE HTML> <html> <head> <meta http-equiv="refresh" ...
- Android学习系列(36)--App调试内存泄露之Context篇(上)
Context作为最基本的上下文,承载着Activity,Service等最基本组件.当有对象引用到Activity,并不能被回收释放,必将造成大范围的对象无法被回收释放,进而造成内存泄漏. 下面针对 ...
- AOP静态代理解析2-代码织入
当我们完成了所有的AspectJ的准备工作后便可以进行织入分析了,首先还是从LoadTimeWeaverAwareProcessor开始. LoadTimeWeaverAwareProcessor实现 ...
- NHibernate中多表(对象)间的查询
一个比较简单的查询代码如下: IList userList=session.Find (" from testMSSql.student as student where student ...