如何在所有塊引號的開頭添加一個FontAwesome字符？

我正在使用FontAwesome。現在我有一個blockquote，它的前面有一個圖像，顯示它的引號。如何在所有塊引號的開頭添加一個FontAwesome字符？

blockquote { 
    background-image: url("./styles/roman/imageset/forum/quote.gif"); 
    background-attachment: scroll; 
    background-position: 6px 8px; 
    background-repeat: no-repeat; 
    border-color: #dbdbce; 
    border: 1px solid #dbdbdb; 
    font-size: 0.95em; 
    margin: 0.5em 1px 0 25px; 
    overflow: hidden; 
    padding: 5px; 
}

FontAwesome有一個引號中的字體，我不知道是否有一種方法將它從當前是一個背景，只是顯示的字符改變。我不知道使用內容和字體類型是否可行。

例

[ 「]這是無論什麼雜誌報價。

其中[」]是目前報價圖像。

來源

2016-01-25 Iscariot

您可以使用CSS僞選擇::before。

爲了您的例子中，你可以使用：

blockquote::before { 
    content: '\"'; 
}

更多參考，see here。

如果您希望包括從FontAwesome庫的圖標，你可以用下面的嘗試：

blockquote::before { 
    font-family: FontAwesome; 
    content: '\f10d'; /*quote left icon*/ 
}

來源

2016-01-25 22:03:47

你是唯一回答這個問題的人。所有其他答案都不正確。 – Iscariot

您可以嘗試使用類似的CSS ::before僞選擇：

blockquote::before { 
    content: "\""; 
}

這將blockquote元素前插入一個單引號。（注意逃生標誌）

如果你想顯示圖像，您可以使用此：

blockquote::before { 
    content: '<img src="./styles/roman/imageset/forum/quote.gif" class="quotemark"/>'; 
} 

img.quotemark { 
    /* Style the image here. */ 
}

來源

2016-01-25 22:03:40 Moshe

NOP，它是內容：網址（xxxx.xxx）; –

由於問題是專門問關於字體真棒，這是不可能的。 http://stackoverflow.com/questions/22511499/add-html-tag-inside-css-content-property – Iscariot

您可以使用::before僞元素與content: open-quote插入一個開引號，和::after一個與content: no-close-quote遞減報價嵌套級別而不顯示任何報價。

如果要自定義引號，請使用quotes屬性。根據A list of Font Awesome icons,fa-quote-left是\f10d和fa-quote-right是\f10e。

最後，要使用適當的字體顯示該字符，請使用font-family: FontAwesome。

blockquote { quotes: "\f10d" "\f10e" '「' '」' "‘" "’"; } 
 
blockquote::before { content: open-quote; font-family: FontAwesome; } 
 
blockquote::after { content: no-close-quote; }

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> 
 
<blockquote> 
 
    Hello world! 
 
    <blockquote>Foo bar<blockquote>Baz</blockquote></blockquote> 
 
</blockquote>

來源

2016-01-25 22:06:48 Oriol

由於問題是專門問關於Font Awesome，這是不可能的。 HTTP：//計算器。com/questions/22511499/add-html-tag-inside-css-content-property – Iscariot

@Iscariot你不能用CSS插入HTML，但我認爲Font Awesome會插入一個自定義字體，你可能會設置合適的' font-family'使用該字體。我對Font Awesome沒有太多的想法，我想。 – Oriol

@Oriol嗯，除了'content：「」'屬性，那是... – TylerH

如何在所有塊引號的開頭添加一個FontAwesome字符？

回答

相關問題