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);

}

Iconfont图标应用教程_第1张图片
 

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

你可能感兴趣的:(Iconfont图标应用教程)