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

Question

在我从头开始开发的网站中，我有一个ul＆amp; li导航菜单就像这样：

|*|Lorem Ipsum|Dolor Sit|Amet|

*是直接嵌入到html页面的svg主页图标。这是我用来生成它的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;
}