玛托托 的图标字体2:基础

玛托托 的图标字体2:基础

2016年10月18日出版 in 发展
为什么我们仍然做德国品
为什么我们仍然做德国品
2016年10月12日
定制Etento.'S订单使用XSLT导出XML输出
利用Xtento利用XSLT’S订单导出Magento模块
2016年10月27日

图标在网上有一个历史记录。在糟糕的旧时代,它们被视为网页上的任何其他图像,使用单个图像元素实现。这携带了几种负面影响,其中包括较差的语义和过多的HTTP请求,因为页面上的每个图标图像都被单独加载。一种卓越的方法,具有图像 替代 使用CSS,伪元素和精灵。基于CSS的方法留下了HTML语义未受干扰的,并且SPRITE图像对单个大图像与背景定位相结合的不必要的资产请求,而不是每个图标的图像。

当然,即使是CSS Sprite技术也仍然具有它的主要原因’基于图像。这意味着需要图像编辑软件来创建或编辑精灵,无论您是否正在创建自己的图标,或者从其他地方拉入其他位置。这也意味着在一天结束时,您的图标是一个扁平的像素,受解决限制。 (请注意玛黑多O 1响应主题’■使用两个不同尺寸的精灵图像,以适应像视网膜设备的高像素密度显示。)当今的方法快速获得广泛的采用,这完全削减了故事的图像,是图标字体。 Magento 2.’他的本机主题完全包围了这种技术。

由于有很多原因,使用for for图标是有意义的。实际上,ICONOCHION始终与文本比内容图像更多的共同之处;图标是传达对观众意义的雕文。在技​​术方面,字体字形是可以扩展到任何分辨率的矢量信息。当然,如果你’重新使用基于图像的图标的Web开发人员,它’很可能在生成自己的字体文件中,您没有小程度的不适。幸运的是,越来越多的图标字体意味着有很棒的工具可供您使用。本机Magento主题提供了实现所需的框架,并在本文中,我’LL向您介绍一个基金会,将让您更好地装备用于定制Magento’s icons easily.

玛托托 简要概述’s Icon CSS

你’ll find the icon font files for the Magento Blank theme in lib/web/fonts/Blank-Theme-Icons (in the typical multiple file formats to support all user agents). lib/web/css/source/lib/variables/_typography.less defines the font icon path and name, and in the Magento Blank theme web/css/source/_icons.less uses these to define the icon font face itself, to be used in all CSS declarations.

The final relevant piece to be aware of is lib/web/css/source/lib/variables/_icons.less, where LESS variables are defined to store the Unicode characters that correspond to the right font glyphs for each icon. This will be a handy reference for you when needing to re-assign said character codes to new icons.

The defined icon font face and the character variables are used throughout the theme LESS code to define icons, usually through a call to the lib-icon-font mix-in.

有关CSS结构的信息,请携手,以定制图标字体,您’有一个很棒的起点;更改定义图标字体路径和名称的变量以及您’通过自己成功替换本机图标。但这仍然留下了如何首先生成自己的图标字体的问题。

字体库和工具

你’ve有两个主要选项,用于定义Magento主题的自定义图标:创建自己的,或樱桃挑选一些可用的库。有在线工具支持任何一种方法,允许您以最终字体以自定义创建包装。一个伟大的例子,这里覆盖的一个 icomoon. .

此字体生成工具有许多免费和付费的图标集,您可以从中选择和选择。它还支持对Magento图标自定义的其他功能。 Icomoon还具有相当强大的编辑界面,用于调整各个图标的缩放和定位。

使用icomoon,您可以从像magento这样的导入的字体开始 ’■本机图标,通过删除一些并添加其他方式来制作所需的调整,然后重新导出完成的字体。 Magento在本地可用的五种文件类型中,icomoon’S缺少WOFF2。那’但是,没有问题,因为有足够的工具来用于字体文件类型转换。尝试 一切字体 。 icomoon.’最终包装手柄包括JSON配置和示例CSS,但您也是如此’ll是避开了对magento赞成的css’s native structure.

警告和增强的起动包

我早些时候说过,一旦你’在手中获得了您的自定义图标字体,更换了Magento’由于为字体路径和名称设置较少的变量,因此原始图标也可以简单。如果是这种情况,那就太好了。不幸的是,如果你’使用Magento空白作为主题起点并计划使用可用的库定制它’重新遇到障碍:相对于其边界框的空白字体中图标的大小明显小于典型的字体’LL在icoomoon上找到。与空白主题中的字体大小和线路高度相结合替换将导致与它们的空间相比,将导致异常大的图标’re used.

有两种方法可以接近这个问题。首先是使用iComoon缩小您在自定义集中使用的任何图标’S上述编辑界面。通过这种方法,您避免了任何CSS更改,但是您’LL必须触摸您希望在自定义字体中包含的每个图标。

第二种方法是自定义CSS字体大小和行高度以匹配更典型的图标大小。这有利于每次丢弃新的时,不需要担心大小的图标,但它带来了一些前面的开销。如果在较少的变量中仅为此类定制定义了一些典型的图标尺寸,则会很好。不幸的是,这些尺寸的定义在整个模块中,在Magento中的各种模块较少的源文件中相当多得多。它’幸运的休息,那么,Magento Luma示例主题包含一个更典型的尺寸的图标字体,以及相应的字体大小。

如果您想延长leener,更加vanilla magento空白,请使用主题而不是延伸亮度,后者至少提供了一个适当的样板,从中提取正确的样式以正常化图标大小。然后’s exactly what I’ve done in 这个启动器主题包装。此主题延伸空白但使用LUMA图标字体,包含适当的CSS重置尺寸。您将注意到这些重置包含在主题中’s _extend.less, meaning that it supersedes rather than replaces the baseline styles. While this leads to slightly more bloated compiled CSS, it’自从在所述文件中赢得绝大多数风格以来,避免完全复制无数的核心主题文件的权衡’t change from Blank. (The resulting _extend.less also provides a precise reference for which relevant styles should be tweaked if further re-sizing is needed.)

请注意,此套餐是一项正在进行的工作,您可能会发现我的区域’错过了需要进一步调整的地方。

把它全部拉到一起

由于使用空白主题的规模问题,您应该首先通过自定义图标确定您想要接管以下哪种方法:

  • 方法A:大小您的图标,以匹配空白主题中的CSS大小
  • 接近B:直接扩展亮度主题
  • 方法C:实现CSS以匹配更典型的图标大小

哪种方法最好?这可能取决于您打算使用替换中替换时自定义多少个图标。如果你’只替换几个,接近A可能最适合您。如果你’重新让您的主题与批发新图标集具有鲜明的味道,但方法B或C可能是去的方式。

如果你’使用方法c,获得 这个起动器图标主题。您可以安装和扩展此主题,或将其样式直接复制到您自己的主题中。

  1. 在 ( icomoon. ,导入SVG字体文件以获取起始图标字体(例如,亮度图标)。导航到Icomoon应用程序并使用导入图标。方便地,您的导入字体将收集到自己的集合中。
  2. 对于您要替换的图标,请从集合中删除现有的字形。
  3. 选择替换图标。如果需要,请使用图标库添加其他免费或付费的图标集。然后选择替换,然后从自定义集的设置菜单中选择复制选择。
  4. 如果你’VE创建了自己的自定义图标,使用导入从自定义集的设置菜单中设置。
  5. Switch to the Generate Font tab at the bottom of the IcoMoon interface and make sure to set the correct Unicode character values for all new icons. Use the variable reference in lib/web/css/source/lib/variables/_icons.less. (If you’不确定哪些字符代码与哪些图标匹配,您可以在删除原稿之前在初始导入的字体中记下它们。)
  6. 如果你’使用方法A(即,尺寸为匹配空白主题的CSS的Size图标),在icomoon中切换到编辑模式,选择每个新图标,并使用“Scale”功能要大小为符号以匹配默认空白图标。
  7. 为您的字体命名。采用“Edit Info”从图标集的设置菜单。
  8. 通过切换到界面底部的“生成字体”选项卡下载字体包,然后选择“Download” from the same tab.
  9. 获取Woff2文件格式以换句话说,五格式Magento可用于其默认字体。掌握像这样的资源 一切字体 并使用转换工具。
  10. Copy all font file types from the font directory of your downloaded package into your theme at web/fonts.
  11. In web/css/source/_theme.less 在 your theme, set @icons__font-path and @icons__font-name appropriately with the file path and name of your new icon font.
  12. 如果你 discover you need any further tweaks to icon CSS sizing, use web/css/source/_extend.less to implement these tweaks.

2 Comments

  1. 布拉德 说:

    嗨,克里斯,真的很棒的文章!也许你可以帮助我?=)
    我使用了这个编码的这一行“-o-transform:scale(1);”正确缩放我的歌剧图标,但它没有’帮助我。也许它是因为特别是这些图标,我正在使用– //mobiriseicons.com/
    他们有可能有什么问题吗?你怎么看?感谢您的教程!

    • 克里斯纳尼亚 说:

      看起来那种图标集支持SVG和字体。如果你’重新使用前者,可以’真的很谈论这一点。如果字体,就像文章的主题一样,不需要转换。只需使用字体大小来控制图标的大小。

发表评论

你r email address will not be published. 必需的地方已做标记 *

本网站使用AkisMet减少垃圾邮件。 了解如何处理评论数据.

最近的帖子 查看全部
3月1日,2021年

Covid的巨大加速要求再次欺诈和消费者虐待警惕

2月3日,2021年

社交媒体在科迪德自然时期的增长’s One

1月5日,2021年

替代社交媒体

您是否注意到您的Facebook和Instagram内容似乎越来越少,并且每次通过都会越来越少?用于达到的帖子 […]