How to use block-grid classes - zurb-foundation

Question

Everything has been working great: grids, media queries, text visibility, and all that other good stuff.
I tried to use block grids for my social media image links and found that it wasn't working at all. I scoured through the foundation files I included in my project and block-grid classes are not defined anywhere. I'm curious what I'm missing. Is there a separate file that I need to include into my project to use block-grid's?
Foundation block grid documentation
Scripts and stylesheets included in my project:
<!-- Within Head tag -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/terminal/jquery.terminal-0.9.2.css" />
<!-- At End of Body tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/terminal/js/jquery.terminal-0.9.2.min.js"></script>
<script src="js/terminal/js/jquery.mousewheel-min.js"></script>
An example of what I tried doing:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img class="img-icon" src="./img/blogger.png" /></li>
<li><img class="img-icon" src="./img/email.png" /></li>
<li><img class="img-icon" src="./img/github.png" /></li>
<li><img class="img-icon" src="./img/googleplus.png" /></li>
<li><img class="img-icon" src="./img/linkedin.png" /></li>
<li><img class="img-icon" src="./img/stackoverflow.png" /></li>
<li><img class="img-icon" src="./img/twitter.png" /></li>
</ul>
The result of the above code is just a normal unordered list, each image has a bullet on a separate line.
Also, img-icon class doesn't overwrite anything. Removing this class doesn't make block-grid work.
Edit: Just to note, I downloaded foundation 6 via their website from the website section. You can see what files I included in my project by looking at my script and stylesheet tags above.
Edit 2: foundation.css (added to jsfiddle because of size): foundation.css file contents

Answer 1

You linked to the Foundation 5 block-grid docs but you are using Foundation 6. In Foundation 6, the block-grid was combined with the regular grid.
The block grid from Foundation 5 has been merged into the main grid. Add a class of the format [size]-up-[n] to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 6.
Source: http://foundation.zurb.com/sites/docs/grid.html#block-grids
Example:
<div class="row small-up-1 medium-up-2 large-up-4">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>

Answer 2

For foundation 6 use that structure.
Remember, de default max columns is 6.
<div class="row small-up-1 medium-up-2 large-up-4">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>