关于Web图标集的7个专家提示用法和优点



您是否想为网站使用图标集以及选择哪个图标集?这些专家技巧可能只是使您相信许多专业的Web开发人员已经知道的知识:从包含的图标集中搜索图标要比逐个查找图标并找到使它们以某种方式保持一致的方法要容易得多。

我们向社区询问了有关使用图标集的最佳技巧,其中许多人都同意使用流行的Font Awesome图标集,但这并不是市场上唯一可用的图标集。

您正在使用哪个图标集?在评论中让我们知道!

 您是否在为网站使用特定的图标集?您是否将Font Awesome用于特定用途(例如,使用Shopify,新闻稿...)?如果是这样,为什么要使用它,您对图标集有何经验?您是否使用过他们的CDN,是否注意到使用情况有所改善?

杰夫·罗斯彻(Jeff Roscher):它添加了漂亮的简单样式,使客户感到现代而又有吸引力

我们在eWorkOrders.com使用Font Awesome。它是我们营销站点和我们的软件即服务(SAAS)产品,计算机化维护管理系统(CMMS)的一部分。在我们的营销网站上,它添加了漂亮的简单样式,使潜在客户发现现代且有吸引力。我们添加了有趣的边框和鼠标悬停事件,以使它们更具交互性和刺激性。对于我们的客户,Font Awesome图标在输入字段中用作可视提示,以帮助识别应输入的数据类型,例如日期字段中的日历图标,电子邮件地址字段中的信封或电子邮件地址中的电话图标。电话号码字段。它们用于功能按钮,例如编辑,复制和打印。

这些图标用于提供有关数据的快速可视信息,例如在过期的工单旁边或需要注意的地方带有红色的感叹号图标。它们也在其他几个地方,只是为了使程序看起来更好。

真棒字体真棒!他们的CDN速度很快,对于我们需要的每种不同图标,都有很多选择。我们从未失望过。

杰夫(Jeff)是eWorkOrders.com的总裁。 eWorkOrders是基于Web的易于使用的CMMS,可帮助客户管理服务请求,工作单,资产,预防性维护等。
杰夫(Jeff)是eWorkOrders.com的总裁。 eWorkOrders是基于Web的易于使用的CMMS,可帮助客户管理服务请求,工作单,资产,预防性维护等。

Rachel Foley:经济实惠的方式轻松访问庞大的图标库

在“映射我的客户”中,我们完全依靠Font Awesome来提供所有营销渠道和产品的肖像,包括:

  • 网站
  • 电邮
  • 社交媒体
  • 自定义图形
  • 移动应用
  • 网络应用

我们使用Font Awesome是因为它是一种负担得起的轻松访问大型图标库的方法。风格更加有趣,与我们的品牌保持一致。另外,我们能够利用不同的权重和样式的图标为我们提供了自由。

我们将CDN用于我们的应用程序,从而在整个产品用户体验中获得非常一致的感觉。另外-在需要时进行升级非常简单。有了市场营销资料,我们会更加灵活一些,并使用CDN,本地安装和矢量版本的混合物。

自一月份全面采用以来,FA一直对我们可靠。

Rachel是一位纽约市的网页设计师和内容营销专业人士,致力于通过SEO策略来增强不断增长的B2B品牌并建立长期的营销成功。她目前在B2B销售软件公司Map My Customer中,为现场销售团队创建解决方案。
Rachel是一位纽约市的网页设计师和内容营销专业人士,致力于通过SEO策略来增强不断增长的B2B品牌并建立长期的营销成功。她目前在B2B销售软件公司Map My Customer中,为现场销售团队创建解决方案。

安德鲁·鲁迪瑟(Andrew Ruditser):随着Font Awesome的升级,我们也进行了升级

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their 社交媒体 Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesome现在提供多种图标供您选择。从设计阶段到开发阶段,我们发现这种灵活性对我们有所帮助。对于Font Awesome,他们的平台为用户提供了两种选择。 First Options是一项免费服务,提供1,588个免费图标供您选择。第二个选项是Pro会员资格,提供7,842个图标。该公司也有我们所谓的Icon备忘单。此列表显示了Font Awesome提供的所有图标,从而告知我们它们是免费软件包还是专业软件包的一部分。

另外,Font Awesome还提供了从CDN中提取其代码的选项。我们强烈建议您走他们的路线。他们的CDN响应时间很快,我们的网站和他们的平台之间几乎没有“滞后”。

首席技术协调员Andrew Ruditser
首席技术协调员Andrew Ruditser

杰夫·罗梅罗(Jeff Romero):它使页面速度更快

我们在Wordpress上为中小型企业客户开发自定义网站。历史上,我们使用图像来表示我们网站上的各种图标,从社交媒体资料到电话和电子邮件图标。使用图像作为图标的过程需要找到一组一致的图标,然后上载它们,然后调整它们的大小以确保它们适合该网站。

尽管它是一个很小的图像文件,但是要获得一致的图标集并使它们与站点的模板匹配是一个过程。现在,使用Font Awesome及其Wordpress插件,我们可以用一组一致的媒体替换图标,这些媒体只需要复制/粘贴一行HTML。更好的是,可以使用少量CSS(使用font-size属性)来调整图标的大小。这些图标的显示效果优于基于图像的图标,并且在移动设备上清晰可见。最后,由于它是一行HTML而不是图像文件,因此它使页面的速度更快。

Jeff Romero是Octiv Digital的联合创始人,Octiv Digital是一家数字营销机构,专门研究本地和企业SEO策略,按点击付费广告管理,网页设计/开发和营销分析服务。
Jeff Romero是Octiv Digital的联合创始人,Octiv Digital是一家数字营销机构,专门研究本地和企业SEO策略,按点击付费广告管理,网页设计/开发和营销分析服务。

万斯:在团队中没有设计师的情况下特别好

作为Web开发人员,我使用Font Awesome作为许多精美图标的快速解决方案。话虽如此,当您的开发团队中没有设计师时,Font Awesome尤其有用。这对于开发Wordpress插件非常方便,因为开发人员可以立即使用Font Awesome的CDN将它们嵌入到其插件中。

到目前为止,我在Font Awesome方面的经验很好。但这并不意味着它没有任何缺点。明显的缺点之一是页面加载速度(性能)。由于这是一种快速的解决方案,因此即使只使用几个图标,也必须嵌入一整套图标。这可能会降低网站的加载速度和Google Page Speed(PSI)得分。

万斯(Vance),网络开发人员和网络所有者。
万斯(Vance),网络开发人员和网络所有者。

Sunny Ashley:简单,干净,可立即被新访客识别

我们在网站页脚中使用Font Awesome图标。具体来说,我们使用Facebook,Twitter和LinkedIn图标来引用我们的社交媒体渠道。它们简单,干净,并且可以立即被新访客识别。正如Font Awesome的其他用户所知道的,它们也非常快速且易于配置。

汽车发票的创始人兼首席执行官Sunny Ashley。 汽车发票为独立的汽车维修店和车库提供商店管理软件。
汽车发票的创始人兼首席执行官Sunny Ashley。 汽车发票为独立的汽车维修店和车库提供商店管理软件。

BurakÖzdemir:羽毛图标不会导致DOM大小过大

Feather Icons是由Cole Bemis设计和维护的,可读性好,视觉上令人愉悦的开源图标的集合。截至2020年6月,有280多个图标可用。 Feather Icons提供的所有图标均已获得MIT许可,可作为SVG文件单独下载。您可以在下载Feather Icon的网站上自定义图标大小,图标的笔触颜色和笔触宽度。

如果您是开发人员或知道如何处理一些基本的前端任务,则“羽毛图标”可能是您的网站或项目的理想选择。由于这些轻量级图标也可以使用模块化JavaScript库进行呈现,因此它们不会引起过多的DOM大小,该指标可能会损害您的网页性能。因此,与市场上提供的其他软件包相比,通过使用Feather Icons,您可以降低页面加载速度。使用此图标集的唯一弊端是您找不到大多数品牌图标。

羽毛图标
BurakÖzdemir是来自土耳其的一名Web开发人员。他专门研究基于Web的应用程序。
BurakÖzdemir是来自土耳其的一名Web开发人员。他专门研究基于Web的应用程序。

Michel Pinson
关于作者 - Michel Pinson




评论 (0)

发表评论