欢迎访问MEETSITE(见站), 登录
如何使用图标组件?
【组件简介】图标组件是以开源的图标字体为核心,通过图标组件的添加,实现图标字体和普通字体一样可以设置字体大小、文字效果、颜色、透明度、阴影翻转等效果,可以在任何背景下显示,加载大小明显比图片小很多;

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

【组件使用】
1、如何添加图标组件?

1)在游览器的地址栏输入见站网址www.meetsite.com打开见站官网,在左上角找到登录入口,输入登录的用户账号和密码,成功登录到用户中心后在我的网站页面单击设计网站,进入编辑网站系统页面;
2)把鼠标放到需要添加组件的位置,出现小水滴及一条黑色的横线并且横线所在区域就是要添加的区域,单击这个小水珠,弹出添加组件的页面,找到并单击基本组件中的“图标组件”,最后单击“保存”按钮即可添加成功了;


2、如何设置图标组件?
1)鼠标移到图标组件区域内,右上角出现图标组件名称,单击图标名称并排的第一个“功能设置”按钮,弹出设置窗口;
【图标】
鼠标移动到组件上,组件会出现下图所示边框,单击“功能设置”按钮,弹出图标功能设置窗口;


选择需要的图标,最后单击保存即可;

【样式】
切换到图标的样式,设置图标位置(居左、居中、居右),拖动进度条调整ico大小、设置图标ico颜色、鼠标悬停颜色、展示风格(默认、圆形、环形、圆角),设置完成后,单击保存;


【特效】
切换到图标的特效,特效设置中可对两个交互进行设置,一个是鼠标悬停组件发生的特效、一个是页面初次加载上组件发生的特效;
鼠标悬停特效:默认、反弹、放大、脉动、旋转、摆动、淡入;
页面初次加载特效:默认、向下弹入、向上弹入、向左弹入、向右弹入、向上渐入、向下渐入、向左渐入、向右渐入、向上放大、向下放大、向左放大、向右放大;



设置以上设置以后,可以根据需要使用此组件的以下功能,以下是所有组件的通用功能:
1、如何编辑组件的样式?
2、
如何添加组件?
3、如何删除组件?
 

联系我们

  • 咨询热线:400-991-0238
  • QQ:1213552269
  • 邮箱:info@meetsite.cn

扫一扫,获取最新资讯
Copyright © 2019 Meetsite Inc, All Right Reserved. 安徽链为网络技术有限公司版权所有 皖ICP备12035407号 隐私条款