I was searching for a new icon in https://material.io/icons, and I found a renovated icons with outline, baseline, rounded, two tones, and sharp versions. So, I want to know If somebody knows how to implement the new icons in that versions, also we can animate that icons. When I try to copy the tag in any version, I obtain de same tag, and my web look like normal, not renovated.
https://material.io/tools/icons/
It appears to not have been implemented yet, here is the GitHub issue:
https://github.com/google/material-design-icons/issues/773
Related
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
I'm looking for best solution how to implement .svg icons into web.
Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.
Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.
For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.
How would you solve this situation ?
The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.
Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...
I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere
Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?
Thank you for your answers :)
Check browser support for the various ways to implement SVG at http://caniuse.com/
Common workflows:
Automatically process .svg files into icon fonts, usable in CSS, with Gulp
Automatically insert .SVG content into HTML as data URIs, with server middleware
Insert all SVG icons inline into a page and reference as SVG Symbols
Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/
So I've found a solution
I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts.
I've used
http://fontastic.me/
Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.
The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
If I could, I'd give #marc-b five upvotes :) The first step, before coming to SO, should always be trying to solve the problem yourself. Then you can come to us with an on-topic question. Here, that first step is to right click on one of the icons you're interested in, and choose "inspect".
There are a couple questions here: what are some ways of making crisp images?, and what's the deal with having multiple images in one file? Both of those are very Googlable, but I'll give you a head start:
Two common ways to make images crisp are:
SVG (vector graphics - as an Illustrator user you already know about the difference between those and raster graphics, and why they're crisp. If not, google "vector raster difference")
2x images - the technique here is to make an image twice the final display size, and then use CSS to shrink it down. The in-browser scaling will have a crisper result that just displaying a 1x image.
Having more than one image in one is called a "sprite." You can have a raster sprite or an svg sprite.
Here's an intro to svg https://css-tricks.com/using-svg/, here's an intro to sprites https://css-tricks.com/css-sprites/, here's an intro to svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/, and here's an intro to the latest thing, srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I'm looking at this site: http://www.calgaryclimbing.com/rates/ . On their footer they have very clean looking icons that link to their social media pages. I want to do the same using the same icons they are using. But when I inspect the elements It shows that they use an i tag and that the class links to some css code that uses the content property. I want to use the image icon so my questions are how can I get the image? And why was it programmed this way? Why not just use an image that you could click on?
I didn't check the link you provided but it's most likely a custom font just like Font-Awesome which you can use to put many kind of icons in your Web Site/App.
Font-Awesome use the <i> tag as well just like you explained.
Why using Font-Awesome?
As they say:
Font Awesome gives you scalable vector icons that can instantly be
customized — size, color, drop shadow, and anything that can be done
with the power of CSS
Does anybody know a open source/free, 32x32 or bigger, complete set of "office" icons for integration in a Rich Text editor - i.e. buttons like
Copy
Paste
Text color
Background color
Bold / Italic / Underline
?
You should look into the Tango Icon Library, it looks great and it's into the public domain (as noted in their FAQ).
The have the same icons in 16x16, 32x32 and 64x64 but they also gave you the svg source, so, you can easily get any dimensions you want exporting them with Inkscape
You can also use the LGPL Crystal Clear as recommended by cobbal.
have a look at http://commons.wikimedia.org/wiki/Crystal_Clear
32x32 or Larger
The Best Vector Icon Sets All In One Place
21 Best Icon Sets for Designing Web Apps
On 2 I think this one might be what you want: WeFunction Free Icon Set
16x16 Icons
You should be able to find icons to suit your needs here. I use this page as a reference all the time when looking for little icons:
All the Small Icons You’ll Ever Need by the Web Design Ledger
another great one that is not listed.
http://p.yusukekamiyamane.com/ is a free icon set with 3160 icons atm. they are 16x16 and some are animated gifs.
Some one in my team uses this. Ico fx. I have never used it my self but the icons always look good.
If your project is non-commercial, then look at this nice spherical Icon set.
If your project is commercial, I'd suggest that a hundred bucks or so would be a good investment :-) eg. something from the Text bundle at IconShock.