在添加字體真棒

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，它應該可以工作。