2015-05-09 09:06:06 +02:00
# Devicon v2
2014-03-02 00:11:54 +01:00
2015-05-09 09:06:06 +02:00
[http://devicon.fr/ ](http://devicon.fr/ )
2014-03-02 00:11:54 +01:00
2015-05-09 09:06:06 +02:00
Devicon aims to gather all logos representing development languages and tools.
See all available icons on the [new website ](http://devicon.fr/ ).
2014-10-10 15:55:44 +02:00
2014-11-28 14:02:50 +01:00
#### Icon requests
2014-11-28 13:59:32 +01:00
2014-11-28 14:02:50 +01:00
Please leave a comment [here ](https://github.com/konpa/devicon/issues/11 ) in order to request an icon.
2014-11-28 13:59:32 +01:00
2014-10-10 15:38:03 +02:00
## How to use
2014-07-21 09:31:53 +02:00
2015-05-09 09:06:06 +02:00
For a super fast setup go check [devicon.fr ](http://devicon.fr/ )
2014-10-10 15:55:44 +02:00
_2 ways of using devicon:_
2014-10-10 15:49:54 +02:00
2014-11-28 14:02:50 +01:00
#### SVG icons
2014-03-02 00:11:54 +01:00
2015-01-24 09:39:54 +01:00
- Copy/paste svg code (from the [svg folder ](https://github.com/konpa/devicon/tree/master/icons ) or the [project page ](http://konpa.github.io/devicon/ ) using your dev tool)
2014-10-10 15:38:03 +02:00
```html
<!-- for git plain version -->
2014-10-10 15:49:54 +02:00
< svg class = "devicon-git-plain" viewBox = "0 0 128 128" >
2014-10-10 15:38:03 +02:00
< path fill = " #F34F29 " d = "M124.742,58.378L69.625,3.264c-3.172-3.174-8.32-3.174-11.497,0L46.685,14.71l14.518,14.518c3.375-1.139,7.243-0.375,9.932,2.314c2.703,2.706,3.462,6.607,2.293,9.993L87.42,55.529c3.385-1.167,7.292-0.413,9.994,2.295c3.78,3.777,3.78,9.9,0,13.679c-3.78,3.78-9.901,3.78-13.683,0c-2.842-2.844-3.545-7.019-2.105-10.521L68.578,47.933l-0.002,34.341c0.922,0.455,1.791,1.063,2.559,1.828c3.779,3.777,3.779,9.898,0,13.683c-3.779,3.777-9.904,3.777-13.679,0c-3.778-3.784-4.088-9.905-0.311-13.683C58.079,83.169,59,82.464,60,81.992V47.333c-1-0.472-1.92-1.172-2.856-2.111c-2.861-2.86-3.396-7.06-1.928-10.576L40.983,20.333L3.229,58.123c-3.175,3.177-3.155,8.325,0.02,11.5l55.126,55.114c3.173,3.174,8.325,3.174,11.503,0l54.86-54.858C127.913,66.703,127.916,61.552,124.742,58.378z" />
< / svg >
```
- Add css rules in your stylesheet
```css
2014-10-10 15:49:54 +02:00
.devicon-git-plain {
2014-10-10 15:38:03 +02:00
max-width: 2em;
}
/* if you want to change the original color */
2014-10-10 15:49:54 +02:00
.devicon-git-plain path {
2014-10-10 15:38:03 +02:00
fill: #4691f6 ;
}
```
2014-11-28 14:02:50 +01:00
#### Icons font
2014-10-10 15:38:03 +02:00
- Upload devicon.css and font files to your project
2014-03-02 00:11:54 +01:00
2014-03-07 20:13:04 +01:00
```html
< link rel = "stylesheet" href = "devicon.css" >
2014-03-02 00:11:54 +01:00
2014-10-10 15:38:03 +02:00
<!-- if you want colored versions -->
< link rel = "stylesheet" href = "devicon-colors.css" >
```
- Add icon using < i > tag
```html
2014-03-07 20:13:04 +01:00
<!-- for git plain version -->
< i class = "devicon-git-plain" > < / i >
2014-10-10 15:38:03 +02:00
2014-03-07 20:13:04 +01:00
<!-- for git plain version with wordmark -->
< i class = "devicon-git-plain-wordmark" > < / i >
2014-10-10 15:38:03 +02:00
2015-01-27 10:43:36 +01:00
<!-- for git plain version colored with git main color (devicon - color.css or devicon.min.css required) -->
2014-07-21 09:22:58 +02:00
< i class = "devicon-git-plain colored" > < / i >
2014-10-10 15:38:03 +02:00
2015-01-27 10:43:36 +01:00
<!-- for git plain version with wordmark colored with git main color (devicon - color.css or devicon.min.css required) -->
2014-07-21 09:24:17 +02:00
< i class = "devicon-git-plain-wordmark colored" > < / i >
2014-03-07 20:13:04 +01:00
```
2014-03-02 00:11:54 +01:00
2015-05-09 09:06:06 +02:00
< sub > Final font is build with [Icomoon app ](https://icomoon.io/ )</ sub >
##### See the [devicon.json file](https://github.com/konpa/devicon/blob/master/devicon.json) or [devicon.fr](http://devicon.fr/) for complete and up to date reference of icon's available versions.
2014-11-28 13:59:32 +01:00
## Contribute
Please have a look at the CONTRIBUTING.md file
2015-05-09 09:06:06 +02:00
< sub > All product names, logos, and brandsare property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.< / sub >