saeedalipoor / icono Goto Github PK
View Code? Open in Web Editor NEWOne tag One icon, no font or svg, Pure CSS
Home Page: http://git.io/icono
License: MIT License
One tag One icon, no font or svg, Pure CSS
Home Page: http://git.io/icono
License: MIT License
The SCSS code does not match the LESS code. For example, the "icono-next" class:
/* next.less */
.icono-next{
width: 0;
height: 0;
border: @10 solid transparent;
border-left: @10 solid;
border-right: none;
margin: @7 @14 @7 @10;
box-shadow: @4 0;
}
/* next.scss */
.icono-next{
width: 0;
height: 0;
border: $U10 solid transparent;
border-left: $U10 solid;
margin: $U7;
&:before{
position: absolute;
left: 0;
top: -$U10;
width: 0;
height: 0;
border-width: $U10 $U3 $U10 $U3;
border-style: solid;
}
}
I was wondering why my icon wasn't rendering correctly - then I went into the developer console, changed styles to match the LESS rules, and it worked. Don't know why bad styles are left over in the SCSS code, but it would be great if they stayed in sync.
Perhaps there should be a build-time test script that checks if the SCSS and LESS compiled output are identical, and displays a warning if not.
how do you change the size?
The icono-gear class only shows 2 nested circles instead of gears.
It works fine in IE 11. Haven't tested on other browsers.
In Firefox Developer Edition:
In IE 11:
I also made my own version for a gear: JSFiddle. Works fine on both browsers.
Hello, thanks for a project! It's really great! Love it.
But are you going to create SASS files for it?
The icon QQ is not"straight". Don't know how to describe but have a closer look ~~
Please add underscore in file names for exclude the compilation of all files.
such likes
when some tags likes
<ul>
<li>aaaa</li>
<li>bbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeeee</li>
</ul>
we hope has an easy way to add icon before every li.
so if we can use them like this:
icono-bars
<ul>
<li><i class="icono-bars"></i>aaaa</li>
<li ><i class="icono-bars"></i>bbb</li>
<li><i class="icono-bars"></i>cccc</li>
<li><i class="icono-bars"></i>dddd</li>
<li><i class="icono-bars"></i>eeeee</li>
</ul>
but if there is easy like this:
/*icono-bars,icono-bars-child-after, icono-bars-child-before*/
icono-bars,icono-bars-child-after > *::after,icono-bars-child-before > *::before
{
.....incon style code
}
<ul class="icono-bars-child-before">
<li>aaaa</li>
<li >bbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeeee</li>
</ul>
please update you'r main attr in bower json
to
"main": "./build/icono.css",
because of wiredep read that instruction for more detail
the wiredep read bower.json
file and inject dependency to the html, if you don't gave the right details to that, it can't does it's job properly.
thank's for you'r awesome font's
رفیق فایل باورت رو درست کن تا بشه با وایردپ درست انجکتش کنی توی اچ تی ام ال
التماس دعا
Lovely icons. Which browsers are supported?
Hi,
Nice project, thank you !
The only problem I have is a mistake in the title : the website gives us a 404 (http://git.io/icono/). The website in the readme is perfectly working.
Thank you for this great work !
saeedalipoor/icono has no versions defined.
As the title says. icono-facebook is included in css, but its LESS file is missing from the repo.
Just to mark it. I'll try to do it and PR soon.
I'm using SCSS in my project, and I want to be able to pull in individual icons to reduce my final payload size. Right now, the SCSS icon files rely on being pulled into icono.scss so the variables.scss, mixins.scss, and functions.scss files are in-scope. Importing one of them individually won't work.
I'd like to see an inversion of control, where each partial file pulls in everything it needs. This way a developer can pull in everything, or only what they need.
This could/should actually be implemented for all languages: Stylus, LESS, and even the vanilla CSS output (provide a minified master file, and then individual files for each icon type).
When printing, icons disappear (on Firefox).
Awesome work!
After looking at the way you handled icon sizes (which I thought was really clever, btw), I couldn’t help but wonder if you might benefit from employing the same strategy but with fractional em
s instead of px
. For example, you could set the base font size to say 16px
and then set @1 = .0625em
,@2 = .125em
, etc.
The potential benefit of this is you could then have a .icono-2x
class, for example, which would simply apply font-size: 32px
and all of the icons would get twice as big. You would only have to add a single line of extra CSS to get sizes in 2x
, 4x
, etc. and the complexity of the .less
code wouldn’t have to change at all, afaict.
I’ll note that I have made some icons like this before and have run into odd browser rounding issues. So this might be a concern. But I think it might be fine if you set a base font size for all icons in px
and then use em
for the width
, height
, border-width
, ::after
and ::before
sizes, etc.
I’d be happy to take a stab at a PR if you think this is something icono could benefit from.
Allow for css color overriding.
I'm trying to use icono-chain
with a Bootstrap-style CSS reset. One part of this is:
* {
box-sizing: border-box;
}
However, it seems that icono assumes the box sizing on the :before
and :after
elements will be content-box
(browser default). Since setting the box-sizing of every element to border-box
is fairly common, content-box
should explicitly be set on [class*="icono-"]:before, [class*="icono-"]:after
.
The GitBook builds all fail. Unfortunately I can not see what the cause is.
I was asking me how would I resize an icon, for an small button for example. Would that be possible with a class "small" for example or without modifying the variables?
Thanks for sharing this :D
Easily seen on http://saeedalipoor.github.io/icono/ where the carets shows as slightly skewed "x"s.
This is very cool!
Would you be interested in a scss port of this lib.?
It would be much harder to commit less, scss and stylus files out of sync with one another if the build process first compiled all three versions in memory and checked for equivalent output.
If there are differences, the build should cancel and a diff should be printed to the console.
Would help to resolve #36 in a sane manner (no one wants to validate all the differences with their eyeballs).
And are you open to people contributing icons?
I would love to see a GitHub icon and a GPG/Encryption/Key icon.
This could produce weird results if the stylus and less files produce different output. Whichever one is saved last during gulp watch becomes the built version.
Also, if #43 is solved, the output should be exactly the same - so we should just build and write whichever one has the fastest compiler.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.