個々のユニコードのフォントワームアイコンの周りの境界？

Question

個々のフォントウソームアイコンの周りに（ユニコードコードを使用して）枠線を追加しようとしています。例えば、私のCSSファイルに私が使用しています：

content: "\f008\00a0\f001\00a0\f26c" 

をしかし、私はここに境界線を追加しようとした場合、それはすべての3つのアイコンの周りに1つの境界を置きます。 3つのアイコンのそれぞれに個別に境界線を付ける方法はありますか（00a0スペースではありません）。

はサンキュー

Answer 1

いや...あなただけの1つの境界を取得しますので、それは...複数の文字で一つの要素（または擬似要素）です。

spanの個々の文字の周りに境界線を置くようなものです...できません。

最高でも、Font-Awesomeはスタッキングを使用してアイコンの周りに境界線を置く方法を提供しますが、通常は単一のアイコンに対してのみです。それを微調整できるかどうかは議論の余地がある。

楽しい実験です。

それはが行われるべき方法：迅速な対応のための

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
i:before { 
 
    font-family: 'FontAwesome'; 
 
} 
 
i.one:before { 
 
    content: "\f008"; 
 
} 
 
i.two:before { 
 
    content: "\f001"; 
 
} 
 
i.three:before { 
 
    content: "\f26c"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square-o fa-stack-2x"></i> 
 
    <i class="fa one fa-stack-1x"></i> 
 
</span> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square-o fa-stack-2x"></i> 
 
    <i class="fa two fa-stack-1x"></i> 
 
</span> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square-o fa-stack-2x"></i> 
 
    <i class="fa three fa-stack-1x"></i> 
 
</span>