Mirrors/MaterialDesign
2
0
Fork 0
mirror of https://github.com/Templarian/MaterialDesign.git synced 2026-03-10 18:36:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updates to getting started.

Browse Source
This commit is contained in:
Austin Andrews
2015-05-30 23:52:11 -05:00
parent 9e2841ce50
commit d2aa7b616d
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
site/getting-started.savvy
View File

@@ -18,14 +18,22 @@
@text
</button>
}
@boostrapInfo(){
<div class="boostrap-specific">
<a href="/boostrap">
<span>Boostrap</span>
<small>Getting Started</small>
</a>
</div>
}
# @title
There are many different ways you can consume the Material Design Icons in your projects or sites. Below are examples for various platforms.
@boostrapInfo() There are many different ways you can consume the Material Design Icons in your projects or sites. Below are examples for various platforms.
## Web Font @download(Download the Web Font, https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip)
## Webfont @download(Download the Webfont, https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip)
For those targetting the web your best option is to use the web font (bower `bower install mdi` or npm `npm install mdi`). Files should match the file structure below.
For those targetting the web your best option is to use the webfont (bower `bower install mdi` or npm `npm install mdi`). Files should match the file structure below.
```text File Structure
fonts
@@ -48,7 +56,7 @@ To reference the icons add the line below into the `head` tag.
To use the icons inline use the syntax below. Preview these in the `preview.html` provided.
```html Web Font Example
```html Webfont Example
<i class="mdi mdi-bell"></i> <!-- bell -->
```
@@ -56,7 +64,7 @@ To use the icons inline use the syntax below. Preview these in the `preview.html
## Inline SVG
The web font is not the only way to use the icons. They can also be included inline with the `svg` tag. Right click any icon on the site and click the 'View SVG' item in the context menu for example code.
The webfont is not the only way to use the icons. They can also be included inline with the `svg` tag. Right click any icon on the site and click the 'View SVG' item in the context menu for example code.
```html SVG Inline Exmaple
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
@@ -64,7 +72,7 @@ The web font is not the only way to use the icons. They can also be included inl
</svg>
```
SVGs like the web font can be overlayed and combined.
SVGs like the webfont can be overlayed and combined.
```html Overlay Example
<svg style="width:24px;height:24px" viewBox="0 0 24 24">