Estoy usando FontAwesome. En este momento tengo una cita en bloque que tiene una imagen delante que muestra una comilla.

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 tiene una comilla en su fuente, me preguntaba si hay una manera de cambiarlo de ser un fondo actual a solo mostrar el carácter. No sabía si usar contenido y un tipo de fuente funcionaría.

Ejemplo

["] Esta es una cita de cualquier revista.

Donde ["] es actualmente la imagen de la cita.

3
Case 26 ene. 2016 a las 00:59

3 respuestas

La mejor respuesta

Puede utilizar el pseudo-selector de CSS ::before.

Para su ejemplo, usaría:

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

Para obtener más información, consulte aquí.

Si desea incluir el icono de la biblioteca FontAwesome, puede intentar con lo siguiente:

blockquote::before {
  font-family: FontAwesome;
  content: '\f10d'; /*quote left icon*/
}
8
Daniel Higueras 25 ene. 2016 a las 22:11

Puede intentar usar algo como el CSS ::before pseudo selector:

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

Eso insertará una comilla simple antes del elemento blockquote. (Tenga en cuenta la marca de escape).

Si desea mostrar una imagen, puede usar esto:

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

img.quotemark {
  /* Style the image here. */
}
0
Moshe 25 ene. 2016 a las 22:03

Puede usar un pseudoelemento ::before con content: open-quote para insertar una cita de apertura, y una ::after con content: no-close-quote para disminuir el nivel de anidación de la cita sin mostrar ninguna cita.

Si desea personalizar las comillas, use la propiedad quotes. Según Una lista de iconos de Font Awesome, fa-quote-left es \f10d y fa-quote-right es \f10e.

Finalmente, para mostrar ese carácter usando la fuente apropiada, use 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>
2
Oriol 25 ene. 2016 a las 23:10