icons - font - fuentes de iconos html

Añadir información sobre herramientas al icono de fuente impresionante

Question

¿Alguien aquí ha añadido información sobre herramientas a los iconos de fuente impresionante?

Tengo el siguiente jsfiddle , pero parece que no puedo encontrar una guía para agregar información sobre herramientas a los iconos.

`

  <!-- display welcome text -->
  <div id="welcomeText">
    <p>Welcome Harriet</p>
  </div>

</header>`

Answer 1

Debe usar el atributo ''título'' junto con ''data-toogle'' (bootstrap).

Por ejemplo

<i class="fa fa-info" data-toggle="tooltip" title="Hooray!"></i>Hover over me

y no olvide agregar el javascript para mostrar la información sobre herramientas

<script>
    $(document).ready(function(){
        $(''[data-toggle="tooltip"]'').tooltip();   
    });
</script>

Answer 2

El problema de agregar información sobre herramientas a cualquier salida HTML (no solo a FontAwesome) es un libro completo por sí solo. ;-)

La forma predeterminada sería utilizar el atributo de título:

  <div id="welcomeText" title="So nice to see you!">
    <p>Welcome Harriet</p>
  </div>

o

<i class="fa fa-cog" title="Do you like my fa-coq icon?"></i>

Pero como a la mayoría de las personas (incluyéndome a mí) no les gustan las sugerencias de herramientas estándar, hay MUCHAS herramientas que las "embellecerán" y ofrecerán todo tipo de mejoras. Mis favoritos personales son jBox y qtip2 .

Answer 3

En lo que respecta a esta pregunta, esto se puede lograr fácilmente usando unas pocas líneas de SASS;

HTML:

<a href="https://www.urbandictionary.com/define.php?term=techninja" data-tool-tip="What''s a tech ninja?" target="_blank"><i class="fas fa-2x fa-user-ninja" id="tech--ninja"></i></a>

La salida de CSS sería:

a[data-tool-tip]{
    position: relative;
    text-decoration: none;
    color: rgba(255,255,255,0.75);
}

a[data-tool-tip]::after{
    content: attr(data-tool-tip);
    display: block;
    position: absolute;
    background-color: dimgrey;
    padding: 1em 3em;
    color: white;
    border-radius: 5px;
    font-size: .5em;
    bottom: 0;
    left: -180%;
    white-space: nowrap;
    transform: scale(0);
    transition: 
    transform ease-out 150ms,
    bottom ease-out 150ms;
}

a[data-tool-tip]:hover::after{
    transform: scale(1);
    bottom: 200%;
}

Básicamente, el selector de atributos [data-tool-tip] selecciona el contenido de lo que está dentro y te permite animarlo como quieras.

Answer 4

Prueba esto :

Font Awesome es una biblioteca extremadamente simple pero potente de usar, con 634 iconos disponibles en pocas palabras.

¿Como funciona? Font Awesome utiliza caracteres Unicode almacenados en un directorio ../fonts para cambiar cualquier elemento i.fa al carácter Unicode respectivo, como tal, mostrando el icono como texto.

¿Cómo creo un icono? Todas las clases de iconos deben ser un elemento i, o un elemento en cursiva, principalmente para las mejores prácticas, pero también mejoran el rendimiento con Font Awesome. Todos los iconos también tienen la clase fa en ellos. Esto denota un icono y no funcionará sin él. Después de eso, simplemente agregue el icono que desee, con el prefijo de otro fa-. Un ejemplo terminado está abajo:

se convierte en lápiz de fa

Debido a que la impresionante fuente funciona con caracteres Unicode, también permite que cualquier manipulación de texto se aplique a ella, como el tamaño de la fuente, el color y más.

demo : https://jsfiddle.net/u9Lcp3vz/

Answer 5

Simplemente use el título en la etiqueta como

<i class="fa fa-edit" title="Edit Mode"></i>

Esto mostrará el ''Modo de edición'' cuando se desplace el ícono.

Answer 6

https://codepen.io/jonmilner/pen/bfkKF es quizás un ejemplo útil.

<div class="social-icons">
  <a class="social-icon social-icon--codepen">
    <i class="fa fa-codepen"></i>
    <div class="tooltip">Codepen</div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Color Variables */
$color-codepen: #000;

/* Social Icon Mixin */
@mixin social-icon($color) {
  background: $color;
  background: linear-gradient(tint($color, 5%), shade($color, 5%));
  border-bottom: 1px solid shade($color, 20%);
  color: tint($color, 50%);

  &:hover {
    color: tint($color, 80%);
    text-shadow: 0px 1px 0px shade($color, 20%);
  }

  .tooltip {
    background: $color;
    background: linear-gradient(tint($color, 15%), $color);
    color: tint($color, 80%);

    &:after {
      border-top-color: $color;
    }
  }
}

/* Social Icons */
.social-icons {
  display: flex;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2.5rem;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  transition: all 0.15s ease;

  &:hover {
    color: #fff;

    .tooltip {
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, -150%);
    }
  }

  &:active {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
  }

  &--codepen { @include social-icon($color-codepen); }

  i {
    position: relative;
    top: 1px;
  }
}

/* Tooltips */
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.8rem 1rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -100%);
  transition: all 0.3s ease;
  z-index: 1;

  &:after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
    border: solid;
    border-width: 10px 10px 0 10px;
    border-color: transparent;
    transform: translate(-50%, 100%);
  }
}