当前位置:首页 > 开发素材 > 正文内容

把 SVG 图标对齐到文本

admin5年前 (2020-09-15)开发素材1395

SVG 图标能像字体图标那样进行缩放吗?

我们只需要引用一个 CSS 类对 SVG 的尺寸置为 1em / 1em 的大小,就能模拟使用 font-size 属性去缩放图标。这也就意味着,若标题文本的字体尺寸为 48px,那么对应之下 SVG 图标将会是 48px / 48px 的大小。当往像按钮或输入框这样的组件添加图标时,该方法显得尤为有效。此外,我们还可以通过修饰类或使用内联的 CSS 样式来给定一个字体尺寸。换而言之,SVG 图标的大小取决于其 font-size 属性。

.svg-icon svg{
    height: 1em;
    width: 1em;
 }


如何解决 SVG 图标未与文本对齐的问题?

上述方法的负面影响在于,DOM 元素自身并未与文本对齐。针对于此,过去我会采用一个标签处理类(handler class).svg-icon 来承托该元素的尺寸,并使用相对定位的方式进行布局。这样的话,SVG 图标就能在该类内部采用绝对定位的方式改变位置。也就是说,把该图标往下移动 “-0.125em” 的距离,就可以使得图标在任何尺寸下都能往下移动12.5%。

从该首例中,我们可以看到 DOM 元素默认情况下会与文本的基线(baseline)对齐。既然图标已经适配于该基线,那么,我们只需要把该基线往下移动,就能达到真正对齐的效果。因此,通过计算可以得出上述例子尺寸下的移动距离为 6px,或 6px/48px,即12.5%。同样,在第二个例子中,我们只需要把图标往下移动-0.125em 的位置,即能对齐文本的基线。

<p class="svg-icon">
  <d2-icon-svg name="icon-experience"></d2-icon-svg>
  系统内存占用过高
</p>


.svg-icon {
  display: inline-flex;
  align-self: center;
  position: relative;
  height: 1em;
  /*width: 1em;*/
  font-size: 20px;
}

.svg-icon svg {
  height: 1em;
  width: 1em;
  margin-right: 5px;
}

.svg-icon.svg-baseline svg {
  bottom: -0.125em;
  position: absolute;
}

该方法适用于个人的字体和图标系统吗?

也许适用吧。毕竟,每一种字体都会以不同的方式进行构建。从下例可以看到,尽管每一个字族中的字母都有着同样的 font-size 值,但它们却有着各自唯一的宽高。当然,浏览器对行高容器(line-height container)的计算并不会产生任何变化,但这也并不意味着你不需要为自己已有图标集定制出一个 CSS 样式,来修改图标的位置。

如何创建一个新图标?

首先,先创建一个模板并制定好字体的尺寸。如下图所示,我是采用了96px 的文本尺寸,并配有相称的行高。然后,画出数条红线来标识文本行高及其基线的边界,以便分辨出最大的图标。当然在该例中,我还借鉴了 Google 的 Material 图标并引用其设计模板,去更好地理解如何构建属于自己的图标。

利用下面这个 Codepen 来测试你自己的字体与图标的配对效果。


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/306.html

分享给朋友:

“把 SVG 图标对齐到文本” 的相关文章

H-ui css 命名规范

 1. 内容优先,表现为辅   2. css命名中英文对照   current 当前     hover 悬停    ...

H-ui html命名规范

 default/index.html    首页   list.html             ...

H-ui 文件夹命名规范

admin     后台管理   app       应用   article   资讯  &...

10个顶级的CSS UI开源框架

10个顶级的CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。本文分享了10个顶级的CSS UI开源框架,有...

Eclipse的Aptana studio插件安装

Eclipse安装Aptana插件【在线安装】1. 在线安装:Help->Install New Software...->Add...->Name: "Aptana", Location: http:...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。