Using metro-bootstrap with Font-Awesome-icons in tiles

[z0nk]

Hi,
I am trying to use the Font-Awesome-icons in the tiles.
this is my code:

<ul class="thumbnails">
      <li class="span3 tile tile-double">
          <a href="#">
              <i class="icon-tasks icon-large icon-5x"></i>
             <h1 class="tile-text">Task</h1>
          </a>
      </li>
</ul>

the issue is that there is no text visible and the icon is only visible if there is a mouse-hover event. what am i doing wrong?

[z0nk]

Is this project even active?

[kb6673]

The icon is large, so it pushes the text below.
You are also possibly missing a color on your body tag that Font Awesome inherits. Specify a colour for the icon.

[MartinDevillers]

I started using this skin today and ran into the same idea. Here's a quick and dirty way to combine Font Awesome with tiles:

Add the following css class to your style sheets:

.tile-icon {
    color: white;
    line-height: 125px; 
    font-size: 80px;
}

and write your iconized tiles like this

    <ul class="thumbnails">
            <li class="span3 tile tile-red">
            <a href="#" title="Upload a new document">
                <i class="tile-icon icon-upload"></i>
            </a>
        </li>
    </ul>

[z0nk]

I extended your solution a little to add some text under the icon:

for css:
(this is stylus-style)

.tile-icon
  margin 20px
  color white
  line-height 100px
  font-size 60px

.small-tile-description
  font-size 12px
  color white

and the html output

<ul class="thumbnails">
  <li class="span3 tile tile-red">
    <a href="#" title="My Title">
      <i class="tile-icon icon-group"></i>
      <div class="small-tile-description">My Title</div>
    </a>
  </li>
</ul>

but maybe there will be a better solution from the developers here ;)

[NelsonReis]

Unfortunately, we no longer have the time to work on this project. This means that bugs will not be fixed and features will not be added unless someone else does so.

If you're interested in fixing up metro-bootstrap, please reply to this GitHub issue (#65).

Thank you for your support.

[Bashamega]

Hello @z0nk
Sorry for the late reply, this project was inactive.
It seems that the issue is solved.
On the main website and example is working
Code:

<div class="col-sm-6 col-md-3">
	<div class="thumbnail tile tile-medium">
		<a href="#" >
			<img src="images/twittertile.png">
			<h2>
			Tweet
			</h2>
		</a>
	</div>
</div>