+ Almentar o tamanho da fonte- Diminuir o tamanho da fonteCompartilharEditar postagemComentar essa postagemLink para esta postagem Ícones para seu site

Uma das maneiras que está muito sendo usada por sites como: Myspace, Microsoft, DropBox e outros, é usar ícones com Web fonts. Bom é assim, para impedir que os usuários baixem ícones de sites, agora todos estão usando a fonte 'Pictos', para criar símbolos com letras do próprio teclado. Então vamos lá, primeiro crie um elemento que você que usar. Por exemplo, aqui eu vou fazer com uma DIV:

<div class="s-b-a" data-icon="">Adicionado</div>

Agora vamos criar uma regra @font-face no seu site: <style type="text/css"> @font-face { font-family: 'Pictos'; src: url(https://sites.google.com/site/iagob26/pictos-icons.ttf);} *[data-icon]::before { font-family: 'Pictos',sans-serif;font-size: 13px;line-height: 0;content: attr(data-icon);margin-right: 5px;} </style>

Modifique do jeito que quiser (recomendo mudar o tamanho da fonte) e salve!

Agora veja a imagem abaixo e escolha um ícone e veja o seu respectivo símbolo.

Agora cole o simbolo dentro das aspas de data-icon da DIV que criamos lá no começo. Exemplo:

<div class="s-b-a" data-icon="3">Adicionado</div>

Pronto, agora salve essa div em qualquer lugar onde você queira usar o tal ícone que você escolheu.

Important: Isso foi só um exemplo, claro que você pode criar vários outros modelos a partir deste.

Bom esse data-icon não é novo, mais ta ganhando um bom destaque por causa de suas utilidade e o jeito de impedir downloads que vc não quer que aconteça. Essa fonte (Pictos) criar ícones interessantes com as letras do alfabeto.

Exemplo:

Adicionado

Código do exemplo: <div role="button" class="button-red y-u-i" style="display: inline-block;padding: 2px 8px;" data-icon="3" tabindex="0">Adicionado</div>

Qualquer dúvida, já sabe.