iconfont问题集

iconfont使用

我这只介绍一种： 链接使用

1. 进入iconfont页面
2. 选择图标加入购物车
3. 购物车加入项目中：没有项目你可以创建项目
4. 图标管理 --》 我的项目 --》font class && 在线连接
5. link标签href属性

<!-- 假如fontclass的在线连接是：//at.alicdn.com/t/font.css-->
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font.css"/>

6. 我的项目 --》更多操作 --》项目信息 --》 Font Family

<!-- 假如Font Family是：icont 还没有完成-->
<span class="icont"></span>

7. 我的项目 --》鼠标房子字体图标上 --》复制代码

<!-- 假如 复制代码 是：icon-infoForm 完成 -->
<span class="icont icon-infoForm"></span>

iconfont使用问题

项目中有其他框架等（具有iconfont图标的），与你自己引导的iconfont发生冲突,

• 问题描述:你输入的是甲（iconfotn）结果页面给你显示乙||丙||丁反正就不是你要的那个字体图标
• 问题解决：你能够显示出字体图标，而你的第7步没有出错，则可能是你的iconfont项目这（第六步：Font Family与你项目中其他框架出现冲突），进入iconfont项目--》更多操作--》编辑项目 --》Font Family 这修改名称

<!-- 假如 Font Family修改的名称为： testIcont -->
<span class="testIcont icon-infoForm"></span>

字体图标不显示

• 问题描述：字体图标位置出现[]
• 问题解决： 如果你第7步没有问题，则第6步Font Family，进入iconfont项目--》更多操作--》编辑项目 --》查看Font Family(ps：查看是不是一样的)

<!-- 假如Font Family是：icont ->
<span class="icont icon-infoForm"></span>

课外话题

css3的@font-face

<!-- 假如Font Family是：icont ->
@font-face{//字体
    font-family：testFont;//字体名称,大约于iconfont的第6步
    src：url（hrefUrl）;//字体下载网址 ，大约于iconfont的第5步
    font-weight：500; //字体粗细
}

<div style="font-family:testFont">这里面的文字会被设置成样式</div>