将 svg 图标的大小调整为导航菜单中的文本大小

Question

在一个 Ia 正在从头开发的网站中，我有一个像这样的 ul 和 li 导航菜单：

|*|Lorem Ipsum|Dolor Sit|Amet|

* 是一个 svg 主页图标，直接嵌入到 html 页面中。这是我用来生成它的 css：

#main_menu { /*id for ul*/
  overflow: auto;
}

#main_menu li {
  float: left;
  margin: 0px 1px;
  padding: 0px 4px;
  height: 16pt;
}

/* id for svg home icon in #main_menu */
#home_icon {
  fill: #eeeeee;
  stroke: #eeeeee;
}

我想根据其他条目的大小调整 svg 图标的大小，但是我不知道文本的大小。我该怎么做？

Answer 1

你试过em单位吗？

#home_icon {
  fill: #eeeeee;
  stroke: #eeeeee;
  width: 1em;
  height: 1em;
}