Recherche petit picto gratuit

Bonjour,

Pour mon site internet, je recherche des petit picto gratuit de couleur noir . Connaissez vous des sites où je pourrai les trouver ?

Plus précisement, je recherche des pictos qui traduisent les notions suivantes :

-Référencement, visibilité
-Gain de temps (montre , horloge)
-Gagner de l'argent ou de la clientèle

Merci de votre aide
Pasquinelle

http://www.flaticon.com/authors/freepik

En svg (base64) c'est encore plus propre au final.

Merci de votre réponse et de votre aide.

Deux dernières questions ou plutôt conseils :

- Pour illustrer le référencement, la visibilité d'un site internet, quelle serait le picto que vous utiliseriez ?

-Quel format choisir pour rendre le fond des picto transparent ?

A bientôt

Salut,

Comme te l'indique Manhattan, tu peux utiliser le SVG (de plusieurs manières), c'est l'idéal car c'est un format vectoriel donc tu ne perds pas de qualité si tu l'agrandis ou bien tu peux utiliser le PNG qui gère la transparence.
La solution idéale pour ce genre de picto est le SVG qui est entièrement supporté sauf IE8.
Pour voir que tu ne perds pas de qualité sur le SVG mais bien sur le PNG, tu peux modifier la taille de l'élément .picto sur le Codepen (par exemple 1000px...)

Tu peux encore te créer une webfont sur icomoon.io par exemple, mais là on est plus haut niveau...

Voici un exemple sur Codepen.
Modifié par MatthieuR (27 Mar 2016 - 14:50)

Merci de ta réponse. Pour tout te dire , je n'y connais rien à ce niveau.

Ça parait compliqué alors que cela ne l'est pas :
Tu trouves ton picto, imaginons celui-ci : (un mot clé en anglais ou général suffit comme "seo" dans la recherche)
http://www.flaticon.com/free-icon/seo-performance-marketing-graphic_33381#term=seo&page=1&position=1

Tu cliques sur SVG (oui tu pourrais directement obtenir du code en base64 mais le site en question alourdit le fichier avec des infos pas obligatoirement nécessaires).
Tu télécharges ton fichier SVG.
Puis tu l'uploades ici :
http://b64.io/

Tu copies colles le code généré, en l'occurrence seul le background-image :

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iOTYuMzQzcHgiIGhlaWdodD0iOTYuMzQzcHgiIHZpZXdCb3g9IjAgMCA5Ni4zNDMgOTYuMzQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5Ni4zNDMgOTYuMzQzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTk0LjE3MSwyMC40NDRMODIuNDQ5LDEwLjIyMkw3MC43MjgsMEw1OS4wMDUsMTAuMjIyTDQ3LjI4MywyMC40NDRoMTIuODI4QzU1Ljc5Miw0Ni45NzUsMzEuMjc4LDY3LjYxMywzLjM4Miw2My4yMjVjLTEuMjI3LTAuMTkxLTEuNzI0LDEuNDYtMC41MTgsMS44NzljMzQuNzE2LDEyLjA4Miw3NC43MTEtNy43Nyw4MC40OTctNDQuNjZIOTQuMTcxeiIvPjxwYXRoIGQ9Ik02OC4xNzEsNTQuNzIyYy0zLjYwNCwzLjMzMi03LjYzNSw2LjIzNS0xMiw4LjY2M3YzMi45NThoMTJWNTQuNzIyeiIvPjxwYXRoIGQ9Ik0zOC4xNzEsOTYuMzQzaDEyVjY2LjMyNGMtMy44MTMsMS42MjUtNy44MjcsMi45MDYtMTIsMy44MDJWOTYuMzQzeiIvPjxwYXRoIGQ9Ik03NC4xNzEsOTYuMzQzaDEyVjIzLjQ0NGgtMC4zMDNjLTEuODgzLDkuMzA0LTUuOTcxLDE3LjcyNS0xMS42OTcsMjQuODM3Vjk2LjM0M3oiLz48cGF0aCBkPSJNMTQuMTcxLDcwLjkyNmMtNC4wNzUtMC41OTYtOC4wODgtMS41NTItMTItMi44OTV2MjguMzEyaDEyVjcwLjkyNnoiLz48cGF0aCBkPSJNMjAuMTcxLDk2LjM0M2gxMlY3MS4xMzVjLTIuNzI5LDAuMzMxLTUuNTEsMC41MDUtOC4zMzUsMC41MDVjLTEuMjI2LDAtMi40NDctMC4wNDYtMy42NjUtMC4xMTJWOTYuMzQzeiIvPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=);

Tout ce code correspond en fait à ton image.

Et tu regardes bien comment MatthieuR l'a utilisé sur son codepen : le premier exemple.

Une toute petite précision : tu peux sans problème utiliser le code en base64 d'une image si c'est une petite image et le code à utiliser n'est pas background-image: url(...) mais bien ce qu'il y a à l'intérieur des parenthèses (de data: image... à Zz4=) :

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iOTYuMzQzcHgiIGhlaWdodD0iOTYuMzQzcHgiIHZpZXdCb3g9IjAgMCA5Ni4zNDMgOTYuMzQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5Ni4zNDMgOTYuMzQzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTk0LjE3MSwyMC40NDRMODIuNDQ5LDEwLjIyMkw3MC43MjgsMEw1OS4wMDUsMTAuMjIyTDQ3LjI4MywyMC40NDRoMTIuODI4QzU1Ljc5Miw0Ni45NzUsMzEuMjc4LDY3LjYxMywzLjM4Miw2My4yMjVjLTEuMjI3LTAuMTkxLTEuNzI0LDEuNDYtMC41MTgsMS44NzljMzQuNzE2LDEyLjA4Miw3NC43MTEtNy43Nyw4MC40OTctNDQuNjZIOTQuMTcxeiIvPjxwYXRoIGQ9Ik02OC4xNzEsNTQuNzIyYy0zLjYwNCwzLjMzMi03LjYzNSw2LjIzNS0xMiw4LjY2M3YzMi45NThoMTJWNTQuNzIyeiIvPjxwYXRoIGQ9Ik0zOC4xNzEsOTYuMzQzaDEyVjY2LjMyNGMtMy44MTMsMS42MjUtNy44MjcsMi45MDYtMTIsMy44MDJWOTYuMzQzeiIvPjxwYXRoIGQ9Ik03NC4xNzEsOTYuMzQzaDEyVjIzLjQ0NGgtMC4zMDNjLTEuODgzLDkuMzA0LTUuOTcxLDE3LjcyNS0xMS42OTcsMjQuODM3Vjk2LjM0M3oiLz48cGF0aCBkPSJNMTQuMTcxLDcwLjkyNmMtNC4wNzUtMC41OTYtOC4wODgtMS41NTItMTItMi44OTV2MjguMzEyaDEyVjcwLjkyNnoiLz48cGF0aCBkPSJNMjAuMTcxLDk2LjM0M2gxMlY3MS4xMzVjLTIuNzI5LDAuMzMxLTUuNTEsMC41MDUtOC4zMzUsMC41MDVjLTEuMjI2LDAtMi40NDctMC4wNDYtMy42NjUtMC4xMTJWOTYuMzQzeiIvPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=

Tu peux donc coller cette portion de code dans l'attribut "src" de la balise <img>.
Modifié par MatthieuR (29 Mar 2016 - 10:22)

J'avoue qu'en fonction des cas je gère ou un background, ou une img ou j'embarque.
Tout dépend si l'on veut modifier certaines choses comme les couleurs parce que les techniques à base de mask c'est fun mais bon voilà quoi ...^^
Modifié par Manhattan (29 Mar 2016 - 16:58)

Merci à tous de votre participation. Je vais lire à tête reposé vos posts. A bientôt

Bonjour,

je reviens pour vous dire que tout à fonctionner. Voici le résultat :http://www.zoomjuridique.fr/

(attention le site est en construction, ne regarder que le tableau dans lequel est indiqué "augmenter votre visibilité" , "gagner du temps" "augmenter votre clientèle". )

Cependant, ce tableau que j'ai fait n'est pas responsive. Je vais donc ouvrir un nouveau poste pour encore solliciter votre aide.

Bien à vous

Pasquinelle

C'est bien, ça fonctionne, mais tu aurais pu/du utiliser la version SVG de l'image pour ne pas avoir de problème sur les écrans retina (au pixel-density d'au moins 2x) par exemple (ton image sera floue sur ces écrans, et ils sont nombreux...).

Si j'aime bien ton astuce de bordure pour avoir un effet en biais entre tes items du menu.
Tu aurais pu utiliser la propriété transform: skewX(-20deg); pour faire le biais.

Voici un exemple sur Codepen de la manière dont j'aurais fait ton menu.

<nav>
  <ul>
    <li>
      <div class="content">
        <img class="picto"  src="http://image005.flaticon.com/28/svg/33/33381.svg" alt="Augmenter votre visibilité" />
        <span class="text">Augmenter<br>votre visibilité</span>
      </div>
    </li>
    <li>
      <div class="content">
        <img class="picto"  src="http://image005.flaticon.com/1/svg/66/66166.svg" alt="Gagner du temps" />
        <span class="text">Gagner du temps</span>
      </div>
    </li>
    <li>
      <div class="content">
        <img class="picto"  src="http://image005.flaticon.com/1/svg/81/81102.svg" alt="Augmenter votre clientèle" />
        <span class="text">Augmenter<br>votre clientèle</span>
      </div>
    </li>
  </ul>
</nav>

body, html{
  margin: 0;
  font-size: 62.5%;
  background-color:white;
  font-family: Arial Black, Arial, sans-serif;
}
nav{
  text-align: center;
}
ul{
  display: inline-block;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 5rem auto;
  background: linear-gradient(to right, #eaeaea, transparent, transparent, #eaeaea);
}
li{
  position: relative;
  display: block;
  float: left;
  height: 11.5rem;
  width: 28rem;
  padding: 0 3rem;
  background-color: #eaeaea;
  text-align: left;
  transform: skewX(-15deg);
}
li:not(:last-child){
  margin-right: 0.7rem;
}
.content{
  position: absolute;
  top: 50%;
  display: block;
  transform: skewX(15deg) translateY(-50%);
  color: #333;
}
.content .text{
  display: inline-block;
  margin-left: 1.5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.8rem;
}
.content .picto{
  display: inline-block;
  height: 5rem;
  width: auto;
  vertical-align: middle;
}

bonjour,
c'est très intéressant le sujet mais là j'ai une petite question: Pourquoi on fait tout cela alors qu'on peut télécharger l'image en SVG et l'inéerer dans une balise <img> du code HTML??

Salut hamdiR,

Le fait d'insérer une image en base64 directement dans une balise <img> permet de ne pas avoir à faire un lien vers un fichier distant (potentiellement avec un lien brisé) et économise une requête HTTP.

Mais bien sûr, il est (quasiment) tout aussi intéressant d'insérer un lien vers un fichier de type image.svg.

Si on veut pousser un peu vers le SVG, la meilleure manière d'insérer et ensuite de manipuler le SVG est d'utiliser la balise <svg> en récupérant le code du SVG comme ça :

<svg class="picto" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"	 viewBox="0 0 329 329" xml:space="preserve">
          <g>
            <path d="M164.5,0C73.794,0,0,73.794,0,164.5S73.794,329,164.5,329S329,255.206,329,164.5S255.206,0,164.5,0z M225.711,228.303
              l-4.761,4.426c-14.623,13.594-33.25,21.081-52.451,21.081c-17.875,0-34.84-6.275-49.061-18.148
              c-11.65-9.725-20.979-23.214-26.431-38.162H79.25c-1.657,0-3-1.343-3-3v-23c0-1.657,1.343-3,3-3h8.089
              c-0.057-1.342-0.085-2.679-0.085-4s0.028-2.658,0.085-4H79.25c-1.657,0-3-1.343-3-3v-23c0-1.657,1.343-3,3-3h13.758
              c5.452-14.948,14.781-28.437,26.431-38.163C133.66,81.466,150.625,75.19,168.5,75.19c17.423,0,34.041,5.98,48.057,17.293
              l5.058,4.083c0.619,0.5,1.014,1.225,1.099,2.016c0.085,0.792-0.149,1.584-0.648,2.203l-14.447,17.896
              c-1.041,1.29-2.929,1.491-4.219,0.45l-5.058-4.082c-8.801-7.104-19.121-10.859-29.842-10.859c-17.68,0-34.052,10.349-43.689,27.31
              h63.855c1.657,0,3,1.343,3,3v23c0,1.657-1.343,3-3,3h-72.295c-0.078,1.337-0.117,2.675-0.117,4s0.04,2.663,0.117,4h72.295
              c1.657,0,3,1.343,3,3v23c0,1.657-1.343,3-3,3h-63.855c9.637,16.961,26.009,27.31,43.689,27.31c11.85,0,23.465-4.731,32.706-13.321
              l4.761-4.426c0.582-0.542,1.343-0.835,2.152-0.801c0.795,0.029,1.546,0.373,2.088,0.956l15.66,16.846
              C226.994,225.276,226.924,227.174,225.711,228.303z"/>
          </g>
        </svg>

Tu peux retourner sur la démo sur Codepen, le 2ème menu est fait avec des balises <svg>.
Très gros avantage : tu peux modifier la couleur de remplissage, le contour, tu peux également animer tous les éléments du SVG !
Modifié par MatthieuR (30 Mar 2016 - 17:06)