1.如何在HTML中使用图标字体

一般来说，有3种方法：

1、把字符直接写在HTML文件里；

这个方法是简单比较直观，见如下代码，用一个元素去包含一个字符“！”（或！），然后给这个添加一个类。这个字母在选定的字体中被映射到一个特定的图标。

为了显示效果，还需要编写样式类.Icon来决定此字符以哪种字体来显示，如下：

.icon {font-family: ' your-incofont -name ';}

2、使用css来生成内容；

它不直接在HTML文件里添加字符，而是用CSS来生成字符内容。代码如下

可以看出，添加了一个类名“praise”。神奇的事就发生在CSS中，跟上面一样，第一步先定义好字体，然后使用：before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。

.icon {font-family:' your-incofont-name' ;}.praise:before {content: "\f00a"; }

3、用data-icon属性

还有一种跟上面相似方法是使用HTML5的“data-”属性。如：创建一个data-icon属性。

aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。

结合一些搭配使用的CSS属性，可以写成如下代码

[data-icon]:before {font-family: ' your-incofont-name'; content: attr(data-icon);speak:none;}

参考地址：

2.如何在HTML中使用图标字体

正常情况下浏览器中无法显示特殊字体，除了黑体、微软雅黑、宋体还有一些英文字体等等这些常规字体，其他字体浏览器都无法正常识别显示，所以这里就需要自定义字体用到css中的font-face，具体方法如下：

①下载需要的相应字体到本地；

②在css样式中添加如下代码

@font-face{

font-family：字体名称

src:url（字体文件路径）

}字体名称可以为需要调用的字体名称也可以自定义相应名称（为方便后期调用优化，建议使用字体本身的名字），src中的字体文件路径即该字体所在文件夹的路径；

③在需要的用到该字体的css属性中添加font-family：字体名称，和设置常规字体样式一样，该处的字体名称为font-face中定义的字体名称；

按以上操作，即可在网页中正常显示想要使用的特殊字体。

3.如何在Android使用图标字体

1. 字体文件制作

进入网站oon.io/->；注册->；登录->；点击IconMoon App

进入字体生成页面，点击菜单的Manage Projects项

进入项目管理页面，看到项目列表，点击Load

进入项目开始选择图标，选择后点击右下角的Generate Font

进入生成预览页面，点击Download

解压文件后，复制fonts/icomoon.ttf字体文件到Android工程的assets/iconify/egow-icon.ttf

字体制作已完成。Hello, I'm John : )

2. Android应用中如何读取字体

使用开源项目android-iconify

新建Icon类，实现Icon接口

import com.joanzapata.iconify.Icon;

public enum EGOWIcons implements Icon {

ic_glass('\uE92D'),

ic_adjustable_bed_frame('\uE900'),

ic_air_conditioner('\uE901'),

ic_line_chart('\uE902');

char character;

EGOWIcons(char character) {

this.character = character;

}

@Override

public String key() {

return name().replace('_', '-');

}

@Override

public char character() {

return character;

}

}

其中\uE92D编码是对应字体文件水杯的编码

新建Module类，用于读取字体文件

import com.joanzapata.iconify.Icon;

import com.joanzapata.iconify.IconFontDescriptor;

public class EGOWModule implements IconFontDescriptor {

@Override

public String ttfFileName() {

return "iconify/egow-icon.ttf";

}

@Override

public Icon[] characters() {

return EGOWIcons.values();

}

}

在Application类中加载字体模块

Iconify.with(new EGOWModule());11

开始使用字体图标，iconDrawable继承Drawable类

IconDrawable iconDrawable = new IconDrawable(context, icon);11

Android中调用字体图标已完成。Hello, I'm John : )

3. 如何修改字体样式，包括大小，颜色，透明度

IconDrawable iconDrawable = new IconDrawable(context, icon);

iconDrawable.sizeDp(24)； // 大小

iconDrawable.color(color)； // 颜色

iconDrawable.setAlpha(222)； // 透明度

4.如何使用Font Awesome字体图标

很多人都会搜索：如何在PS上使用Font Awesome字体到这个博客，也许你们想搜索的并不是如何在Photoshop上使用fontawesome，而是如何将font-awesome应用到自己的前端开发项目中。

Font Awesome介绍

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性（比如变色、变大变小、字体阴影等）、减少数据加载、样式更容易定义等。

Font Awesome 特性

一个字体文件， 369 个图标。

不需要JavaScript要求：更快的载入速度

无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。

自由免费：你可以将它应用到你的商业中。

CSS控制：轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。

完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中

为BootStrap而生：完全的兼容BootStrap新版3.0

桌面友好：你可以查看字体的样式列表

兼容屏幕阅读器：不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

你只需要到： fontawesome.io�0�2下载压缩包然后解压到你的项目中。

在你的HTML头部的head里面添加对相应的font-awesome的样式。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

根据这里的案例开始你的项目。

如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

<!--[if IE 7]>

<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">

<![endif]-->

5.标志设计如何正确使用字体

每个人都有自己喜欢使用的字体，但你喜欢的字体并不可能在任何时候都适合使用。只有样式特点与合适的图案相结合时，才能发挥出字体的力量感。 有时候你无意中看到某种字体便一见钟情，希望立即就将这种字体用在你自己的设计上。但在你决定使用之前，你是否了解这种字体的线条、形状及细节是否也适用于其它的设计上呢？我们如何作出决定？有时观察一种字体就象在观察一个人的面孔。虽然每个人都有着相同的五官，但我们往往是通过一些细节来辨认某个人的，如眼眉，嘴唇及性格等。同样的，我们需要让某种字体与其它元素互补时，才能真正发挥字体的个性及魅力，否则你使用的字体可能会显得不合事宜，或者仅仅是有趣而已。

University Roman字体：

走在蒙特里著名的罐头厂街的游览胜地时，你会看到University Roman字体出现在这家精品店的招牌上。但这种字体给人的感觉与这家商店却并不搭配，University Roman的字母呈现一种不规则、繁琐的卷曲线及非常幼细的衬线，倒象是你一身狂欢节的打扮去参加一个政治或科学的课程班。这种字体可不是用在这里，它可是要去参加舞会的！让我们看看如何才能在恰当的地方使用这种字体。

细节观察：University Roman字体飘逸的结构使其呈现一种手写体、充满圣诞节气息的特质，这种字体非常适用于在一些奇幻或浪漫的主题中使用。

优点与缺点：

University Roman字母的构成显得非常不规则，而且有很多装饰细节，这注定了这种字体具有良好的展示性及讨人喜欢的面孔，但却并不适合作为正文阅读。要确保在使用时字体尺寸够大。

从上面的比较中我们可以轻易看到，University Roman如果作为正文，将会让人看得抓狂，正文的字体我们一般要采用具有固定节奏感的而且不过于张扬的中性字体才最合适。University Roman作为非常简短的标题或提要时则完全可以胜任（如上图下所示），但如果你的文字超过一句话，你还是少用为妙。

在实际中应用：

（一个春季大减价的宣传卡片设计） 上面两个卡片都设计得非常漂亮。无论是字体的线条、形状还是颜色都与图形元素紧密配合，整体上都呈现一种自然和谐的气息。单独的文字及单独的图形都有各自的力量，但如果两者搭配，完全可以达到一加一大于二的效果。

寻找文字与图形的共性：

圆形：对于一些本身就是呈圆弧形的字母我们可以轻易地发现圆形的存在，但也请你留意一些细节，对于一些字母中的留白空间、曲线包围的区域等同样也具有圆形的结构特点。

图片下方的说明文字我们是采用另一种字体（Futura字体）作为正文，这种字体没有这么花俏，适合于尺寸比较小及文字比较多的时候阅读。有趣之处在于，虽然这种字体与University Roman相差非常大，但圆弧形的结构仍然是这两种字体的共同特点。

图案中那些滴珠状的元素与S这些字母中里面的负空间区域是非常相似的。

利用颜色及“边缘”结合文字与图形