css - Flaticon CSS 图标大小问题

Question

我开始尝试合并来自 http://www.flaticon.com 的一些图标

我让它工作了，但我的问题是，随着我增加图标的大小，越来越多的图标开始占据其容器外的空间，因此与其他内容重叠或被切断。我在下面有一个实时链接。我已经调整了 CSS 中我能想到的所有可以解决这个问题的东西(显示、填充、边距)，但似乎无法让它在不侵犯其上方元素的情况下扩展其容器以容纳自身。任何想法将不胜感激!我已经尝试了很多其他的图标库，我最喜欢这个，所以我真的很想找到一个解决方案。我觉得很奇怪，没有其他人遇到过同样的问题，也许是我页面上的其他东西干扰了我的图标样式？

链接:http://stnatoday.com

一些图片:(页面下方)
(页面上方) 我的 CSS

@font-face {
     font-family: "Flaticon";
     src: url("flaticon.eot");
     src: url("flaticon.eot#iefix") format("embedded-opentype"),
          url("flaticon.woff") format("woff"),
          url("flaticon.ttf") format("truetype"),
          url("flaticon.svg") format("svg");
    font-style: normal;
 }
 [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
 [class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
    font-size: 25em;
    font-style: normal;
    margin-left: 20px;
 }
.flaticon-job-search1:before {
     content: "\e001";
}

Answer 1

我不知道你到底想要什么，但在使用字体时，“行高”属性通常可以解决问题(参见 http://www.w3schools.com/cssref/pr_dim_line-height.asp )也许你可以解释一下期望的结果应该是什么。