现代 CSS

icon

使用React创建SVG图标系统

Icon图标在Web应用或Web页面中起着至关重要的作用。它除了起到一定装饰作用之外,还可以在不添加任何文本信息的情况之下向用户传达正确的含义。在当今的Web开发中,有许多不同的方式将图标运用于Web应用或Web页面上。同样,在社区中也有很多介绍Icon图标系统构建的方法,比如早期的雪碧图字体图标以及SVG Sprites等。但是今天我想从不同的角度来和大家聊聊,如何基于React框架下构建属于自己的SVG图标系统。感兴趣的同学,欢迎继续往下阅读。

如何在Vue项目中使用SVG Icon

Web中对于Icon的使用已经是非常频繁的一件事情了,而且很有图标的使用会让你的Web应用程序或Web网页面变得更具可交互性和可使用性。早前在《Web中的图标》一文中和大家一起探讨了如何在Web中使用图标。其中不同的使用方式都具有各自的优势,但随着技术的革新,其中SVG的图标在Web中的使用也越来越频繁,并且其具备的优势也越来越明显。正因如此,在自己的项目中使用SVG的图标的场景也越来越多,因此,今天想和大家一起聊聊如何在Vue的项目中更好的使用SVG图标。

Icon和文本对齐方式的探索

在Web中很多场景中都会使用到Icon,那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情,特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。

Web中的图标

随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>。除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧图)Icon Font(字体图标)SVG Icon等等。今天我们就来一起探讨一下这些方法在Web中实现Icon的利弊。

SVG Sprite

Sprite(雪碧图)在Web运用中已不是新技术,但大部分同学都还停留在位图的Sprite运用,比如.png图的合成。而这种技术对于现在的Web页面而言并不完美,比如位图在Retina屏幕带来的图标不清晰等现像,是我们技术人员必须面对的一件事情。而今天要说的,就是如何避开使用位图制作Sprite,来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。

如何制作自己的网页字体图标

网页字体图标到现在来说并不是一个新话题,大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标,但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外,其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中,就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。

为什么要用和如何使用字体图标

图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”,因此,有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。由于位图给Web制作带这诸多的不便,为了解决这些问题,CSS3给大家带来一个新的属性@font-face。

使用@font-face制作图标已不是什么秘密,也不是什么新技术,在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“,从教程中,你可以找到@font-face制作图标的优势与不足,同时也能找到要如何得到制作图标的字体。

如何把你的图标转换成web字体

使用@font-face运用本地字体,制作一些特殊的字体效果非常方便,特别是使用@font-face制作图标,更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体,这样一来就有很多同学在问,如何制作自己需要的字体呢?或者说如何将自己需要的图标转换成自己需要字体,在运用到web页面中?这个问题问得很好,其实实现思路并不复杂,我们需要通过一些适量图的软件,绘制出矢量图标,然后通过一定的工具将这些图标转换成需要的字体。或许你会说,这不是废话,还是没有谈到怎么做出来。大家不用着急,根据Martin Gittins的《How to turn your icons into a web font》文章介绍,你只需要一款制作矢量图的应用软件,和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信,不仿往下看,我想你看后,以后再也不会使用位图了。(^_^)

自定义Font Icon

前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3@font-face来制作Icon图标。现在在网上最为流行的是@robmadole@supercodepoet两位大师制作的Font Awesome

@font-face制作Web Icon

@font-faceCSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上,不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛,我们就不在为这个问题说太多的话了,不过我今天要与大家分享的主题和这个@font-face还是有很在关系的,使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际,以前的Icon都是依靠图片来完成,怎么可能用字体就能实现呢?如果你以前有用过HTML的实体符,我想就不会那么惊奇了。

页面

返回顶部