在添加字体真棒

Question

后，滑动轮播箭头正在被截断，我正在为我的网站Peruvian Connection进行轮播。我需要塑造箭头。所以我看了一下stackoverflow论坛，发现我可以使用Font-Awesome和它的Unicode来改变箭头的形状和味道（Thread here：How to style prev/next arrows button?）。更改图标时，它们可以在Chrome中完美工作。尽管它们在IE中被截断，在其他浏览器中也有点bug。我研究了这个问题，发现它是由于箭头的字体大小造成的。

您可以在这里找到一个演示：http://www.peruvianconnection.com/category/ads/lookbook.do?test=test

测试的浏览器：

浏览器 - 完美的作品
野生动物园 - 毛刺有点
火狐 - 只能对一定区域内。
IE 9,10,11 - 箭头被切断。

这里是代码或油滑-Theme.css

@charset 'UTF-8'; 
/* Slider */ 
.slick-loading .slick-list 
{ 
    background: #fff url('./ajax-loader.gif') center center no-repeat; 
} 

/* Icons */ 
@font-face 
{ 
    font-family: 'slick'; 
    font-weight: normal; 
    font-style: normal; 

    src: url('./fonts/slick.eot'); 
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 
} 
/* Arrows */ 

.slick-prev:before, .slick-next:before { font-family: FontAwesome; } 

.slick-prev, 
.slick-next 
{ 
    font-size: 0; 
    line-height: 0; 

    position: absolute; 
    top: 50%; 

    display: block; 

    width: 20px; 
    height: 20px; 
    margin-top: -10px; 
    padding: 0; 

    cursor: pointer; 

    color: transparent; 
    border: none; 
    outline: none; 
    background: transparent; 
} 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus 
{ 
    color:transparent; 
    outline: none; 
    background: transparent; 
} 
.slick-prev:hover:before, 
.slick-prev:focus:before, 
.slick-next:hover:before, 
.slick-next:focus:before 
{ 
    opacity: 1; 
} 
.slick-prev.slick-disabled:before, 
.slick-next.slick-disabled:before 
{ 
    opacity: .25; 
} 

.slick-prev:before, 
.slick-next:before 
{ 
    font-family: FontAwesome; 
    font-size: 40px; 
    line-height: 1; 
    opacity: .75; 
    color: brown; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.slick-prev 
{ 
    left: -25px; 
} 
[dir='rtl'] .slick-prev 
{ 
    right: -25px; 
    left: auto; 
} 
.slick-prev:before 
{ 
    content: "\f0d9"; 
} 
[dir='rtl'] .slick-prev:before 
{ 
    content: "\f0d9"; 
} 

.slick-next 
{ 
    right: -25px; 
} 
[dir='rtl'] .slick-next 
{ 
    right: auto; 
    left: -25px; 
} 
.slick-next:before 
{ 
    content: "\f0da"; 
} 
[dir='rtl'] .slick-next:before 
{ 
    content: content: "\f0da"; 
} 

/* Dots */ 
.slick-slider 
{ 
    margin-bottom: 30px; 
} 

.slick-dots 
{ 
    position: absolute; 
    bottom: -45px; 

    display: block; 

    width: 100%; 
    padding: 0; 

    list-style: none; 

    text-align: center; 
} 
.slick-dots li 
{ 
    position: relative; 

    display: inline-block; 

    width: 20px; 
    height: 20px; 
    margin: 0 5px; 
    padding: 0; 

    cursor: pointer; 
} 
.slick-dots li button 
{ 
    font-size: 0; 
    line-height: 0; 

    display: block; 

    width: 20px; 
    height: 20px; 
    padding: 5px; 

    cursor: pointer; 

    color: transparent; 
    border: 0; 
    outline: none; 
    background: transparent; 
} 
.slick-dots li button:hover, 
.slick-dots li button:focus 
{ 
    outline: none; 
} 
.slick-dots li button:hover:before, 
.slick-dots li button:focus:before 
{ 
    opacity: 1; 
} 
.slick-dots li button:before 
{ 
    font-family: 'slick'; 
    font-size: 6px; 
    line-height: 20px; 

    position: absolute; 
    top: 0; 
    left: 0; 

    width: 20px; 
    height: 20px; 

    content: '•'; 
    text-align: center; 

    opacity: .25; 
    color: black; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.slick-dots li.slick-active button:before 
{ 
    opacity: .75; 
    color: black; 
} 

Answer 1

在您油滑theme.css删除行号33和34，即

width: 20px; 
height: 20px; 

测试中IE.11，我希望它应该支持其他浏览器也是如此。

Answer 2

卸下宽度：20像素;和高度：20px; on .slick-prev，.slick-next，它应该可以工作。