Miko/webicons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #24 from arnaudgaudin/master

Browse Source 
Add VIADEO Icon and LESS CSS support
This commit is contained in:
Adam Fairhead
2014-01-18 14:35:18 -08:00
parent d55000f63e b33787e291
commit 37cfd59a05
9 changed files with 93 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.markdown
View File

@@ -72,6 +72,7 @@ Enjoy Webicons!
* Trip Advisor
* Tumblr
* Twitter
* Viadeo
* Vimeo
* Windows
* WordPress

12
webicons.css
View File

@@ -786,6 +786,18 @@
.svg .webicon.twitter {
background: url("webicons/webicon-twitter.svg"); }
.no-svg .webicon.viadeo {
background: url("webicons/webicon-viadeo-m.png"); }
.no-svg .webicon.viadeo.large {
background: url("webicons/webicon-viadeo.png"); }
.no-svg .webicon.viadeo.small {
background: url("webicons/webicon-viadeo-s.png"); }
.svg .webicon.viadeo {
background: url("webicons/webicon-viadeo.svg"); }
.no-svg .webicon.vimeo {
background: url("webicons/webicon-vimeo-m.png"); }

6
webicons.html
View File

@@ -145,6 +145,8 @@
<a class="webicon twitter small" href="#">Twitter</a>
<a class="webicon viadeo small" href="#">Viadeo</a>
<a class="webicon vimeo small" href="#">Vimeo</a>
<a class="webicon windows small" href="#">Windows</a>
@@ -289,6 +291,8 @@
<a class="webicon twitter" href="#">Twitter</a>
<a class="webicon viadeo" href="#">Viadeo</a>
<a class="webicon vimeo" href="#">Vimeo</a>
<a class="webicon windows" href="#">Windows</a>
@@ -433,6 +437,8 @@
<a class="webicon twitter large" href="#">Twitter</a>
<a class="webicon viadeo large" href="#">Viadeo</a>
<a class="webicon vimeo large" href="#">Vimeo</a>
<a class="webicon windows large" href="#">Windows</a>

24
webicons.less Normal file
View File

@@ -0,0 +1,24 @@
/* Webicons by Adam Fairhead at Fairhead Creative http://fairheadcreative.com */
.webicon { display: inline-block; background-size: 100%; width: 30px; height: 30px; text-indent: -999em; text-align: left; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 5px; }
.webicon:hover { margin: -1px 0 1px; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.webicon.small { width: 20px; height: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.webicon.large { width: 48px; height: 48px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
// Include or remove the icons you want to use on your site from this list.
@webicons-icons: ~"f500px", ~"aboutme", ~"adn", ~"android", ~"apple", ~"behance", ~"bitbucket", ~"blogger", ~"branch", ~"coderwall", ~"creativecloud", ~"dribbble", ~"dropbox", ~"evernote", ~"fairheadcreative", ~"facebook", ~"flickr", ~"foursquare", ~"git", ~"github", ~"goodreads", ~"google", ~"googleplay", ~"googleplus", ~"hangouts", ~"html5", ~"icloud", ~"indiegogo", ~"instagram", ~"instapaper", ~"kickstarter", ~"klout", ~"lastfm", ~"linkedin", ~"mail", ~"medium", ~"mixi", ~"msn", ~"openid", ~"picasa", ~"pinterest", ~"pocketapp", ~"potluck", ~"quora", ~"orkut", ~"mercurial", ~"rdio", ~"reddit", ~"renren", ~"rss", ~"skitch", ~"skype", ~"soundcloud", ~"spotify", ~"stackoverflow", ~"stumbleupon", ~"svn", ~"tent", ~"tripadvisor", ~"tumblr", ~"twitter", ~"viadeo", ~"vimeo", ~"weibo", ~"windows", ~"wordpress", ~"xing", ~"yahoo", ~"yelp", ~"youtube", ~"youversion", ~"zerply";
// Specify the path to the webicons directory here. Include trailing slash.
@webicons-url: "webicons/";
.webicons-loop(@list, @index: 1) when (isstring(extract(@list, @index))) {
@webicons-icon: extract(@list, @index);
.no-svg .webicon.@{webicons-icon} { background: url("@{webicons-url}webicon-@{webicons-icon}-m.png"); }
.no-svg .webicon.@{webicons-icon}.large { background: url("@{webicons-url}webicon-@{webicons-icon}.png"); }
.no-svg .webicon.@{webicons-icon}.small { background: url("@{webicons-url}webicon-@{webicons-icon}-s.png"); }
.svg .webicon.@{webicons-icon} { background: url("@{webicons-url}webicon-@{webicons-icon}.svg"); }
.webicons-loop(@list, (@index + 1));
}
.webicons-loop(@webicons-icons);

2
webicons.scss
View File

@@ -12,7 +12,7 @@
}
// Include or remove the icons you want to use on your site from this list.
$webicons-icons: f500px aboutme adn android apple behance bitbucket blogger branch coderwall creativecloud dribbble dropbox evernote fairheadcreative facebook flickr foursquare git github goodreads google googleplay googleplus hangouts html5 icloud indiegogo instagram instapaper kickstarter klout lastfm linkedin mail medium mixi msn openid picasa pinterest pocketapp potluck quora orkut mercurial rdio reddit renren rss skitch skype soundcloud spotify stackoverflow stumbleupon svn tent tripadvisor tumblr twitter vimeo weibo windows wordpress xing yahoo yelp youtube youversion zerply;
$webicons-icons: f500px aboutme adn android apple behance bitbucket blogger branch coderwall creativecloud dribbble dropbox evernote fairheadcreative facebook flickr foursquare git github goodreads google googleplay googleplus hangouts html5 icloud indiegogo instagram instapaper kickstarter klout lastfm linkedin mail medium mixi msn openid picasa pinterest pocketapp potluck quora orkut mercurial rdio reddit renren rss skitch skype soundcloud spotify stackoverflow stumbleupon svn tent tripadvisor tumblr twitter viadeo vimeo weibo windows wordpress xing yahoo yelp youtube youversion zerply;
// Specify the path to the webicons directory here. Include trailing slash.
$webicons-url: "webicons/" !default;

BIN
webicons/webicon-viadeo-m.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
webicons/webicon-viadeo-s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
webicons/webicon-viadeo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

49
webicons/webicon-viadeo.svg Normal file
View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="68.3477" y1="-305.9956" x2="68.3477" y2="-305.8838" gradientTransform="matrix(430.6171 0 0 430.6171 -29407.7266 131766.4531)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#EAEAEA"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M48,42.001C48,45.312,45.311,48,42,48H6.001C2.687,48,0,45.312,0,42.001v-36C0,2.688,2.687,0,6.001,0
H42c3.312,0,6,2.688,6,6.001V42.001L48,42.001z"/>
<g id="shadow">
<g id="feuille_1_">
<path fill="#EAEAEA" d="M22.628,4.376c0,0,4.366,2.896,5.12,10.854c0,0,1.475,19.121-8.418,22.87c0,0,0.885,0.165,1.883,0.118
c0,0,12.232-7.715,6.621-22.694C27.834,15.524,26.156,10.297,22.628,4.376z"/>
<path fill="#EAEAEA" d="M29.014,17.436c0,0-2.279-3.525,0.613-6.434c0,0,1.014-1.116,3.904-1.852c0,0,2.893-0.617,4.455-3.936
c0,0,3.24,4.521,1.246,10.477c0,0-0.984,2.682-3.043,3.905c-1.551,0.923-3.9,1.214-6.359-1.194c0,0,7.434-4.072,7.711-7.521
C37.541,10.883,35.258,16.015,29.014,17.436z"/>
</g>
<path fill="#EAEAEA" d="M30.908,28.134c0,1.834-0.438,3.542-1.312,5.127c-0.875,1.584-2.057,2.808-3.545,3.669
c-1.49,0.862-3.126,1.294-4.906,1.294c-1.781,0-3.416-0.432-4.905-1.294c-1.489-0.861-2.671-2.085-3.546-3.669
c-0.875-1.585-1.313-3.293-1.313-5.127c0-2.842,0.96-5.267,2.878-7.271c1.919-2.003,4.214-3.005,6.885-3.005
c1.271,0,2.457,0.231,3.561,0.69c0.109-1.161,0.518-2.241,0.969-3.124c-1.389-0.504-2.894-0.759-4.518-0.759
c-3.861,0-7.057,1.421-9.584,4.264c-2.299,2.579-3.449,5.623-3.449,9.134c0,3.542,1.214,6.637,3.644,9.285
c2.429,2.647,5.559,3.973,9.39,3.973c3.816,0,6.939-1.323,9.367-3.973c2.43-2.649,3.645-5.743,3.645-9.285
c0-1.896-0.334-3.651-1-5.273c-1.115,0.687-2.176,1.045-3.053,1.229C30.643,25.276,30.908,26.647,30.908,28.134z"/>
</g>
<g id="viadeo">
<g id="feuille">
<path fill="#F5993E" d="M22.628,5.024c0,0,4.366,2.896,5.12,10.854c0,0,1.475,19.12-8.418,22.869c0,0,0.885,0.165,1.883,0.117
c0,0,12.232-7.715,6.621-22.693C27.834,16.172,26.156,10.944,22.628,5.024z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="59.0996" y1="101.082" x2="59.0996" y2="121.9968" gradientTransform="matrix(1 0 0 -1 -25.0786 121.0547)">
<stop offset="0" style="stop-color:#F59744"/>
<stop offset="0.7296" style="stop-color:#F59642"/>
<stop offset="0.9921" style="stop-color:#F5943B"/>
<stop offset="1" style="stop-color:#F5943B"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M29.014,18.083c0,0-2.279-3.526,0.613-6.435c0,0,1.014-1.116,3.904-1.851
c0,0,2.893-0.616,4.455-3.937c0,0,3.24,4.523,1.246,10.479c0,0-0.984,2.681-3.043,3.904c-1.551,0.924-3.9,1.214-6.359-1.194
c0,0,7.434-4.073,7.711-7.521C37.541,11.53,35.258,16.662,29.014,18.083z"/>
</g>
<path d="M30.908,28.783c0,1.832-0.438,3.541-1.312,5.125s-2.057,2.809-3.545,3.67c-1.49,0.861-3.126,1.294-4.906,1.294
c-1.781,0-3.416-0.432-4.905-1.294c-1.489-0.861-2.671-2.086-3.546-3.67c-0.875-1.585-1.313-3.293-1.313-5.125
c0-2.844,0.96-5.268,2.878-7.271c1.919-2.003,4.214-3.005,6.885-3.005c1.271,0,2.457,0.23,3.561,0.689
c0.109-1.16,0.518-2.24,0.969-3.124c-1.389-0.504-2.894-0.759-4.518-0.759c-3.861,0-7.057,1.422-9.584,4.265
c-2.299,2.578-3.449,5.624-3.449,9.134c0,3.542,1.214,6.637,3.644,9.285c2.429,2.647,5.559,3.973,9.39,3.973
c3.816,0,6.939-1.324,9.367-3.973c2.43-2.649,3.645-5.743,3.645-9.285c0-1.896-0.334-3.652-1-5.273
c-1.115,0.687-2.176,1.045-3.053,1.229C30.643,25.924,30.908,27.295,30.908,28.783z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB