Getting started?

[peterel]

Ive gotten the "included" icons to work fine (back and bars but Im having a hard time just getting started with the rest of the icon set. I have my fonts folder in my project, I edited the "urls" in framework7-icons.css to point correctly, Ive added the <link rel="stylesheet" href="path...to...framework7/framework7-icons.css">. Ive tried using the icons in the following way:

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="f7-icons"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon f7-icons"></i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="f7-icons add"></i>
        </a>
        <a href="/game" class="tab-link">
            <i class="icon icon-bars"></i>
        </a>
    </div>
</div>

Ive tried extracting the actual icons (no direction here where this should go) both to the fonts folder and the dist/img folder. No dice whatsoever.

Any clue as to what Im missing here?

Thanks.

[peterel]

Alright, seems this is solved. For any future people with same issue. One needs to use the exact name of the icon so:

<i class="f7-icons">Home</i> does not work
<i class="f7-icons">home</i> works

Also, I created a new folder called it icons and moved all icons from the src folder there.

Closing this ticket

[Martin Turner]

I've ran into a similar problem, so ive got the css pointing to the fonts folder,
but where should i put the icons? inside the fonts folder too?

[peterel]

@martinturner I made a /libraries/framework7/ folder and placed everything there (fonts folder, icon folder as well as the .css files. Hope it helps.

[Aleksey Razbakov]

And how can I use it with Vue with import instruction?

[junliang jia]

@razbakov is your issue fixed?I tried to import the file framework7-icons.js but it seems nothing happend.

[Aleksey Razbakov]

I added in my main.js:

import Framework7Icons from 'framework7-icons/css/framework7-icons.css'

And than it works.
I think it makes sense to add it to README

[junliang jia]

@razbakov
Thx dude 👍

[Aakash]

Adding to @razbakov answer; here are all the commands

STEP 1 : INSTALL framework7-icons node module:

npm i --save framework7-icons

STEP 2: IMPORT the css (in the entry file - index.js or main.js) :

import "framework7/css/framework7.min.css";

Good Luck...