如何使用图标字体组件?

浏览数量:1     作者:小七     发布时间: 2016-01-28      来源:本站

图标字体
 
【组件简介】 图标字体组件以开源的图标字体库为核心,通过添加图标字体,实现图标可以像文字一样通过font-size 属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover 状态、透明度、阴影和翻转等效果,可以在任何背景下显示,加载大小明显比图片小很多。
 
【应用场景】图标字体组件的应用场景还是很广泛的,在很多场景起到了画龙点睛的作用,比如在联系我们的字段项前面加上图标字体,既可以像文字一样轻便,可以随意编辑大小、颜色,又可以起到像图片一样的美观效果。使用图标字体的优势:(1)轻量性:一个图标字体比一系列的图像(特别是在 Retina 屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少 HTTP 请求,还可以配合 HTML5 离线存储做性能优化。(2)灵活性:图标字体可以用过 font-size 属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover 状态、透明度、阴影和翻转等效果,可以在任何背景下显示。除了以上优势之外,当然也有劣势:(1)图标字体只能被渲染成单色或者 CSS3 的渐变色,由于此限制使得它不能广泛使用;(2)图标字体在低版本的 IE(IE5、IE6、IE7)兼容性不好,会不显示图标字体,请大家知晓。
 
【使用方法】

1、如何添加图标字体组件?
 
打开浏览器,在地址栏输入www.7datong.com,进入七达通科技官网。
 
点击页头的登录按钮

七达通科技建站05
 
输入账户和密码,点击登录

七达通科技建站06
 
在“我的网站”中找到需要编辑的网站,点击“编辑网站”按钮。
 
在需要添加组件的位置找到对应的水滴型按钮,鼠标移动到按钮上,可以看到按钮变成下图所示样式。点击。

3
 
点击后会跳出添加组件窗口。

4
 
向下滚动找到“图标字体”组件。点击。

5
 
图标字体组件出现在网页编辑页面中,添加完成。


2、如何设置图标字体组件?

鼠标移动到组件上,组件会出现下图所示边框。
 
1
 
点击左上方的设置按钮。如图所示。
 
2
 
网页右上角会出现设置页面。如图所示。
 
3
 
点击“选择图标字体”按钮。
 
4
 
点击后会出现选择图标窗口,选择想要的图标,并点击窗口右下方的确定按钮。

5
 
如果想要为图标字体添加链接,则点击如图所示按钮。
 
6

选择链接类型,并点击确定按钮。如果需要在新窗口打开链接,则勾选“在新窗口打开链接”。
 
7
 
左右拖动小蓝点,调整图标字体的大小。

8
 
点击设置图标字体的颜色和悬停颜色。

9
 
选择图标字体的位置。

10

点击上方的“风格”按钮,对图标字体进行更多个性化装饰。

1
 
选择图标字体风格。

2
 
若选择“圆形”,下方则会弹出如图所示若干选项。

3
 
移动小蓝点调整图标字体背景圆直径。并设置背景圆颜色和其悬停颜色。
 
若选择“环形”,下方则会弹出如图所示若干选项。
 
4
 
移动小蓝点调整图标字体背景圆直径以及圆环粗细。并设置圆环颜色和背景圆颜色以及其悬停颜色。
 
点击上方的“特效”按钮,为图标字体添加动作效果。
 
5
 
点击后会出现如下图所示窗口,分别设置鼠标悬停特效及初次载入特效。

6
 
点击右下角保存。设置成功。

          微信公众号

阿里巴巴国际站

网站建设

知识圈

联系我们
  客服QQ:279415070
   服务顾问:17727578727  ( 微信 )
  邮箱:info@7datong.com
  地址 : 深圳市龙华区华油工业区1栋2层
Copyright © 深圳市七达通科技有限公司 All Rights Reserved 版权      互联网服务粤ICP备16005814号
   - 网站地图