iconfont-图标字体的运用

2016-10-16  本文已影响0人  2016_18点

iconfont字体文件是用字体编码的形式来实现图标效果,既然是文字,那就可以随意设置颜色设置大小,但是它只适用于纯色图标,需要用到的属性是@font-face。


先来看一下如何通过@font-face使用特殊字体

通过@font-face使用特殊字体

主要步骤:找字体>转换所需字体格式>在css中引入声明>应用
一、获取特殊字体:
** ** 到免费网站DownLoad字体, 如Dafont.com
下载下来后,需要把它解压缩出来
二、获取@font-face所需字体格式:( 获得@font-face所需的.eot,.woff,.ttf,.svg字体格式
第三方工具或者软件来实现,如 fontsquirrel
先把我们刚才下载的字体上传上去
下载压缩包,解压,解压缩出来的文件格式含有@font-face所需要的字体格式
三、在项目中单独创建一个fonts目录,用来放置解压缩出来@font-face所需的字体格式
在本地项目中的style.css中附上我们需要的@font-face样式


四、把自己定义的字体应用到你的Web中的DOM元素上

建议
英文网站,项目中的Logo,Tags等应用到较多的这种特殊字体效果,建议使用@font-face; 中文网站,使用图片比较合适。
因为加载英文字体和图片没有多大区别,但是中文字体太大了, 加载中文字体,会影响到项目的某些性能的优化;

再来看一下如何通过@font-face使用图标

通过@font-face使用字体图标

主要步骤:找图标>转换所需字体格式>css中引入声明>应用

1.使用已有字库

阿里icon font字库Font-AwesomeGlyphicon Halflings
一、使用@font-face声明字体


二、定义使用iconfont的样式

三、挑选相应图标并获取字符编码,应用于页面

2.使用自定义图标

有很多图标,我们无法使用字符或者实体符来识别,如果需要使用,只能把所有标签都应用,有时我们只需要一两个,而使用这么一个庞大的字符系统,好像有点不太划算。所以我们可以借助工具,使用自定义图标

我们可以下载所需的字体,通过FontSquirrel或者OnlineFontconverter工具来帮助我们转换成所需的字体。下面我们就一起来看看如何得到所需的svg字体,并如何转换成字体。
一、打开Fontomas
二、选择需要的Icon
三、获取字符号或实体符编辑
四、获取svg字体以及字符号的编码
五、转换字体
六、引入使用
引入方法:
1.把字符直接写在html文件里



这个字母(s)在选定的字体中被映射到一个特定的图标
2.使用css来生成内容


同样是需要使用字母s来映射出图标,只不过区别是移除了HTML标签换用了CSS样式实现。
3.用data-icon属性


4.更好的 data-icon 方法


相关参考

CSS3 @font-face
自定义Font Icon
为什么要用和如何使用字体图标

上一篇 下一篇

猜你喜欢

热点阅读