Video icon

Fronts video icons
==============
Before
--------
![image](https://cloud.githubusercontent.com/assets/960919/3599408/4218a24a-0cee-11e4-91ac-89e06018bdb0.png)
After
--------
![image](https://cloud.githubusercontent.com/assets/960919/3599405/360b05ba-0cee-11e4-8efa-41cb7d77ec13.png)

Video player icon
==============
Before
---------
![image](https://cloud.githubusercontent.com/assets/960919/3599430/7d819896-0cee-11e4-9f75-f89741cdf31a.png)
After
-------
![image](https://cloud.githubusercontent.com/assets/960919/3599431/878f82c6-0cee-11e4-894c-4812ccac60cd.png)



Separating skin and structure when possible is a core principle that makes CSS architecture much easier.

Why:
- Structure: element to position the icon within the item
- Skin: an icon (which does not have to know anything about the item)

It does not make sense to do it everywhere but in this example it will ensure reusability and predictability of the `item__cta__icon` class.