Link with icon and text

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>

(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?


<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 class="text-container" style="display: table-row;">
        <span>About Framework7</span>

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


1 Like

Great! Thanks a lot!