Iconfont图标应用教程

3.1 PC端应用教程

iconfont对于前端应用来说有很多便捷：

1、自由变化大小

2、自由修改颜色

3、可以添加一些视觉效果如：阴影、旋转、透明度。

4、兼容IE6

应用步骤：

 

1

font-face声明字体

 

@font-face {font-family: 'iconfont';

    src: url('iconfont.eot'); /* IE9*/

    src: url('iconfont.eot?#iefix') 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#iconfont') format('svg'); /* iOS 4.1- */

}

 

2

定义使用iconfont的样式

 

.iconfont{font-family:"iconfont";

font-size:16px;font-style:normal;}

 

3

挑选相应图标并获取字体编码，应用于页面

 

<i class="iconfont">&#33</i>

3.2 PC端应用常见问题

1、字体图标在safair或chrome浏览器下被加粗？

 

 

(被加粗的字体图标)

(正常比例的字体图标)

以上现象是由于字体图标存在半个像素的锯齿，在浏览器渲染的时候直接显示一个像素了，导致在有背景下的图标显示感觉加粗；所以在应用字体图标的时候需要对图标样式进行抗锯齿处理，CSS代码设置如下：

 

.iconfont{-webkit-font-smoothing: antialiased;}

2、字体图标在IE7浏览器显示中图标右侧出现小方框现象；

 

出现以上现象可以对引用字体图标的非块标签进行以下CSS定义:

 

display: block;

3、字体图标在pc端的chrome浏览器下出现严重的锯齿；

出现以上现象可以对字体图标的边缘进行模糊；（只支持webkit内核浏览器,参数数值不宜设置得很大，这会带来图标加粗的问题）

 

-webkit-text-stroke-width: 0.2px;

放大后出现锯齿的情况

边缘模糊后，完美展现

 

3.3 在Android 中使用iconfont

 

 

应用步骤：

 

1

第一步：复制字体文件到项目 assets 目录；

 

2

第二步：打开 iconfont 目录中的 demo.html，找到图标相对应的 HTML 实体字符码；

 

3

第三步：打开 res/values/strings.xml，添加 string 值；

 

<string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>

 

4

第四步：打开 activity_main.xml，添加 string 值到 TextView：

 

<TextView

    android:id="@+id/like"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="@string/icons" />

 

5

第五步：为 TextView 指定文字：

 

import android.graphics.Typeface;

 

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

 

    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");

    TextView textview = (TextView)findViewById(R.id.like);

    textview.setTypeface(iconfont);

}

 

demo代码下载

 

3.4 在IOS中使用iconfont

demo代码下载

 

 

 

 

应用步骤：

 

1

添加IconFont字体:

1、将您IconFont刚下载的字体文件(.ttf)添加到工程中

 

2、打开Info.plist文件，增加一个新的Array类型的键，键名设置为UIAppFonts（Fonts provided by application），增加字体的文件名：“iconfont.ttf“

 

 

2

使用IconFont字体:

 

UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];

UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];

label.font = iconfont;

label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";

[self.view addSubview: label];

这里有两个地方注意下：

 

创建 UIFont 使用的是字体名，而不是文件名；

文本值为 8 位的 Unicode 字符，我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码，比如：

 

"店" 对应的 HTML 实体 Unicode 码为：

 

0x3439

 

转换后为

 

\U00003439

 

就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符

参数设置：https://coderwall.com/p/wrb3pw