Dicas Framework 7 – Como trabalhar com os ícones do F7

Pacote de ícones do Framework 7

  1. Faça o download do pacote de ícones no GitHub; https://github.com/framework7io/framework7-icons
  2. Descompacte o arquivo
  3. Copie a pasta framework7-icons-master para dentro do seu projeto, cole dentro da pasta www.

Como usar os ícones do Framework 7

  1. Edite o arquivo index.html, acrescente a seguinte linha <link rel="stylesheet" href="framework7-icons-master/css/framework7-icons.css"> dentro do bloco <head>
  2. Agora você pode usar os ícones aonde quiser usando a sintaxe <i class="f7-icons">nome-do-icone</i>. O nome dos ícones estão descritos na página http://framework7.io/icons/

Exemplo de uso

Podemos usar o ícone bars para o menu lateral (veja a aula de como criar um menu lateral aqui). Então podemos usar;

<!-- Top Navbar -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="title">App das galáxias</div>
        <div class="right" style="margin-right: 10px">
            <a href="#" class="panel-open"> <i class="f7-icons">bars</i> </a> 
        </div>
    </div>
</div>

O resultado será este:

Outro exemplo, é criar um menu usando o componente List View.
(veja a aula de como criar um menu lateral aqui)

<div class="list">
    <ul>
        <li>
            <div class="item-content">
                <div class="item-media"><i class="f7-icons">home</i></div>
                <div class="item-inner">
                    <div class="item-title">Home</div>
                </div>
            </div>
        </li>
        <li>
            <div class="item-content">
                <div class="item-media"><i class="f7-icons">help</i></div>
                <div class="item-inner">
                    <div class="item-title">Link 1</div>
                </div>
            </div>
        </li>
        <li>
            <div class="item-content">
                <div class="item-media"><i class="f7-icons">logout</i></div>
                <div class="item-inner">
                    <div class="item-title">Sair</div>
                </div>
            </div>
        </li>
    </ul>
</div>

O resultado será este: