fill:currentColor是什么意思?iconfont为何要设置 vertical-align: -0.15em?
在css中,currentColor是一个变量,这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值,那它的颜色值就遵从CSS规则,从父元素继承而来。.svg-icon {/*将icon大小设置和字体大小一致 */width: 1em;height: 1em;vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致,而spa
·
一、fill:currentColor是什么意思?
一)fill
fill
是SVG元素的一种属性;SVG元素的这些属性,用于指定如何处理或者呈现元素的详细信息- 比如,fill ,对于形状元素和文本,它定义了绘制元素的颜色。对于动画,它定义了动画的最终状态。在下面的例子中,它定义了图标的颜色。
二) currentColor
- 在css中,currentColor是一个变量,这个变量的值是当前元素的color值。
- 如果当前元素没有在CSS里显示地指定一个color值,那它的颜色值就遵从CSS规则,从父元素继承而来。
二、iconfont为何要设置vertical-align: -0.15em
因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果.详细见下方例子:
三、例子
iconfont(阿里图标库) 的 symbol引用,要求加入的通用css代码
.svg-icon {
/*将icon大小设置和字体大小一致,后续在通过svg-icon 使用icon的时候,可直接设置图标的font-size即可控制图标大小 */
width: 1em;
height: 1em;
vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */
fill: currentColor; /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
overflow: hidden;
}
图标未设置 vertical-align: -0.15em;
设置过后:
参考:MDN、阿里图标库的symbol 引用
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献5条内容
所有评论(0)