中心自定字形元素

我有一個SVG文件中定義一個「十」字狀符號作爲中心自定字形元素

<glyph unicode="&#xe604;" d="M784.646 720.646c-30.038 30.038-79.328 30.038-109.367 0l-163.282-163.282-163.282 163.282c-30.038 30.038-79.328 30.038-109.367 0s-30.039-79.328 0-109.367l163.282-163.282-163.282-163.282c-30.039-30.038-30.039-79.328 0-109.367s79.328-30.038 109.367 0l163.282 163.282 163.282-163.282c30.038-30.038 79.328-30.038 109.366 0s30.038 79.328 0 109.367l-163.282 163.282 163.282 163.282c30.038 30.038 30.038 79.328 0 109.366z" />

我試圖把這個圖標，僞元素的CSS，因爲我有HTML

<span class="icon icon-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></span>

和CSS

.icon-close:before { 
    content: '\e604'; 
    color: #474747; 
}

但是在元件的橫由1個像素取決於彈出的地方漂流出現在屏幕上（十字圖標意味着是在彈出的關閉按鈕）

漂移到左： left drifting 漂移到右： right drifting （I得到僞元件灰色背景來說明更清楚）

你有什麼想法，爲什麼發生這種情況，我應該如何使圖標堅持到中心？

來源

2015-04-21 user1038662

嘗試調整字體大小，它可能是一個小故障。它發生在我用FontAwesome。 – Ciprian

嘗試使用icomoon服務，然而，你用哪個參數來生成這種字體？ – FelipeAls

@Ciprian感謝您的建議，但調整大小不工作在我的情況下.. – user1038662

你有沒有考慮過只用僞元素做這個？

喜歡的東西：

div { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 300px; 
 
    background: gray; 
 
} 
 
div:before, 
 
div:after { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 5px; 
 
    height: 20px; 
 
    width: 20px; 
 
    transition: all 0.4s; 
 
} 
 
div:before { 
 
    content: "+"; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    font-size: 20px; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    z-index: 8; 
 
} 
 
div:after { 
 
    content: ""; 
 
    background: gray; 
 
    box-shadow: inset 0 0 0 3px lightgray; 
 
} 
 
div:hover:after { 
 
    box-shadow: inset 0 0 0 3px tomato; 
 
} 
 
div:hover:before { 
 
    color: tomato; 
 
}

<div></div>

來源

2015-04-21 08:23:08 jbutler483

嗨，感謝您的評論jbutler，但這是一個偉大的工作，但實際上並不是我的問題的解決方案，因爲轉換不支持老年人的IE。 – user1038662

中心自定字形元素

回答

相關問題