2015-03-31 53 views
1

我开始试图从http://www.flaticon.comFlaticon CSS图标的大小问题

包含一些图标我得到它的工作,但我的问题是,因为我增加图标的大小,越来越多的它开始占据其容器外部空间和因此与其他内容重叠或切断。我在下面有一个实时链接。我调整了所有可以解决这个问题的CSS(可以解决这个问题)(显示,填充,边距),并且似乎无法让它扩展容器来容纳自己,而不会侵犯它上面的元素。任何想法将不胜感激!我已经尝试了很多其他的图标库,我最喜欢这个,所以我真的很想找到解决方案。我发现奇怪的是,没有人遇到过这个相同的问题,也许是我的网页上的其他内容干扰了我的图标样式?

链接:http://stnatoday.com

一些图片: (下页上) enter image description here
(更高的页面上) enter image description here 我的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"; 
} 

回答

1

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

+0

老实说,我不知道我是怎么想的,我想我忘了这是一个字体。你先生太棒了!那正是我需要的! – Osman 2015-03-31 22:05:37