Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

logos-in-pure-css

Logos In Pure CSS

Company logos created in pure CSS, built in less.
See it in action here: bchanx.com/logos-in-pure-css-demo

Usage

The easiest way to use these icons is to import the corresponding .less file in your own .less styling sheet:

@import "relative/path/to/logos-in-pure-css/twitter.less";

You can also link the stylesheet via .html (but you'll need a copy of less.js, tested on > v1.3.3):

<link type="text/less" rel="stylesheet" href="/path/to/logos-in-pure-css/twitter.less">
<script type="text/javascript" src="/path/to/less.js"></script>

If you prefer not to use less, you can use the .css file provided:

<link type="text/css" rel="stylesheet" href="/path/to/logos-in-pure-css/twitter.css">

Once imported, copy the accompanying logo .html into your own .html file and the icon should display!

<div class="logo-twitter-{{ size }}">                                      
  <div class="body"></div>
  <div class="body-none"></div>
  <div class="beak-bottom"></div>
  <div class="beak-bottom-none"></div>
  <div class="wing-bottom"></div>
  <div class="wing-bottom-none"></div>
  <div class="wing-middle"></div>
  <div class="wing-middle-none"></div>
  <div class="wing-top"></div>
  <div class="wing-top-none"></div>
  <div class="beak-top"></div>
  <div class="beak-top-none"></div>
  <div class="head"></div>
</div>

To see it this in action, open demo.html in your browser.

Sizes

By default, {{ size }} supports two different keywords: large and small. This in turn produces a 300x300px or 52x52px icon.
If you're using less, you can modify the sizes by either changing the @radius param, or by defining your own class and calling the logo mixin() with your desired @radius size.

Currently, the .css file only supports large and small icon sizes.

License

This software is free to use under the MIT license.

About

Company logos created in pure CSS.

Topics

Resources

License

Releases

No releases published
You can’t perform that action at this time.