Link with icon and text

Questions
1

I want to develop a grid menu. Any item will be formed by an icon and below a text.

I have something like this (from Link Docs):

<a class="link" href="path/to/somewhere">
  <i class="icon"></i>
  <br /><span>Link Text</span>
</a>

(I have added br tag)

But the icon and the text are shown inline in the app.

Is it possible to show the icon above and the text below?

Thanks

2 
<a class="link" href="/about/" style="padding: 10px; display: table;">
    <div class="icon-container" style="display: table-row;">
        <i class="icon icon-f7"></i>
    </div>
    <div class="text-container" style="display: table-row;">
        <span>About Framework7</span>
    </div>
</a>

i edit the HTML live, so thats why its in style=’***’. but apply the style in a css class.

Screenshot_2

1 Like
3

Great! Thanks a lot!