图标字体使用方法

一:图标字体特点

  1. 兼容性好(从IE4 开始支持)。
  2. 一定程度会替代精灵图。
  3. 只能是纯色不能加渐变,简约。
  4. 本身是一个字,修改方便。(用font和color属性可以直接修改)。
  5. 加在速度快。
  6. 也可自己制作。

二.图标字体使用方法

1.上阿里巴巴字体库(iconfont.cn)下载需要的图标加入购物车一键下载。下载完文件夹中有以下几个文件。把黄色区域中的四个文件拷贝到站点目录下的font(自己建立)文件夹下。(四个文件夹为了兼容不同浏览器)

2.打开demo.html拷贝以下一段话到html文件中

如下。

其中“iconfont”为字体名称可以自己修改,另外 文件路径需要修改。

3在需要调用文字图标的地方声明字体格式,也可调整字体大小来调整字体格式,也可改变

颜色。如下。

4.打开demo.html 拷贝如下黄色区域中的编码到相应需要使用图片的区域。此时就会显示相应的图标。

时间: 2024-08-07 01:17:26

图标字体使用方法的相关文章

图标字体使用方法总结

使用图标字体可以解决网站中大量的小图标问题,真的很好用,值得收藏,下面介绍图标字体的使用方法: 首先,进入这个网站:http://www.iconfont.cn   选择自己需要的图标 使用图标字体有三种方法: 这三种放的使用方式大致相同. 第一种是:unicode引用: 第二种是:font-class引用 第三种是:symbol引用:

图标字体的使用(fontello.com)字体推荐及使用技巧

网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启作图软件重新调色,并且不同的颜色就要对应一个图片图标 更多弊端不一一列举 如果这些图标能像字体一样,改变大小,更改颜色,那岂不是太爽了,下面的文字就是介绍一种在网页中使用图标字体的方法. 下面懒人建站来介绍图标字体的使用(fontello.com)字体的使用以及技巧 首先:使用火狐.谷歌或者360极

eclipse在高分辨率下图标字体过小问题的临时解决方法

机器:lenovo yoga 2 pro window 8.1 在分辨率3200x1800下eclipse 64位版本图标字体都过小,几乎无法用. 在eclipse出正式fix前的临时解决方法是: 1. 下载eclipse32位版本 2. 调整机器分辨率到2048x1152, scaling factor 150 3. 在windows xp兼容模式下启动eclipse 可作为临时解决方法

CSS高级技巧 图标字体ICONFONT的使用方法视频

图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方,就是制作麻烦. 越来越的网站开始运用这个图标字体. 一些地方,我们就不用精灵图片,直接用图标字体. 图标字体的使用 自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步: 1. 先从网上下载字体.     经常使用的两个网站: icomoon.io http://

iocfont 网页图标字体以及使用方法

在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移动设备.Retina屏幕效果展示.兼容IE6/7浏览器以及能任意将图标放大缩小等,这些都是很不错的. 流行的在线字体定制网站有Fontello和icomoon,这两个在线工具都很不错的,内置的图标也非常的多 打开icoMoon APP字体定制页面,然后你会看到几百个常用图标,这里不建议全选,选几个你需要的就可以了,然后点击底部的“Font”按钮 –> 点击“Download”即可下载字体

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

ExtJs5_使用图标字体来美化按钮

sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了.部分图标截图: Font Awesome的网站为:点击打开链接.进入网站后,先下载Font Awesome 3.0,解压缩后,将css和font目录拷贝到war目录下. (Font Awesome最新版本为4.0,网址为:http://fontawesome.io/ ) 文件拷贝进来以后,需要在in

如何制作属于自己的图标字体

在实践项目中,多多少少都会用到各式各样的图标,作为WEB前端技术人员,又不得不每一次单个单个的切出图标以及重新命名,如果需求又说要将所有图标整合在一张PNG图片里,这样又得耗费很多时间.随着互联网快速的发展,移动端的网站也崛地而起,因此,在浏览移动端的网站时,图标也出现新的问题——“变得模糊了”. 经过度娘的回答,也有了很多解决图标模糊的方法,我这里就不一一例举.本文也只探讨一下其中的一种方法,使用“字体图标”:网上也有很多现成的图标字体下载,那些都只是别人已经做好了的,我们如果要在那些图标里找

图标字体IcoMoon 使用

IcoMoon 使用官方地址 http://icomoon.io/实际上,它是一种字体,只不过这种字体的字象图标一样,比如windows中自带的MT Extra Webdings Wingdings字体.使用的方法就是引入CSS即可我们需要在IcoMoon App中定制他们,网站可以为你生成图标的CSS. 进入到IcoMoon App中,选中你需要的图标,然后点击底部的font便会显示使用该"文字"对应的编码在顶端的Prefences中勾选Encode & Embed Font