README

用于 Magento2 的 Font Awesome 4。

在寻找 FontAwesome 5？我们为它有一个独立的仓库：https://github.com/swissup/font-awesome-5

内容

1. 安装
2. 用法
3. 高级用法
4. 如何替换标准 Magento 图标

安装

cd <magento_root>
composer require swissup/font-awesome
bin/magento module:enable Swissup_Core Swissup_FontAwesome
bin/magento setup:upgrade

用法

1. 在 官方 FontAwesome 网站 搜索您需要的图标

2. 将选定的代码复制并粘贴到 HTML 内容中。

   示例

   <i class="fa fa-camera-retro"></i>

3. 这就完成了！

高级用法

寻找高级用法示例？请看这里

• 图标尺寸
• 固定宽度图标
• 图标列表
• 边框 + 拉伸图标
• 图标动画
• 旋转图标
• 堆叠图标

如何替换标准 Magento 图标

将以下变量添加到您的主题 less 文件中

@icons__font-name: 'FontAwesome';

@icon-font__size: 14px;
@icon-font__line-height: inherit;

@icon-wishlist-full: '\f004';
@icon-wishlist-empty: '\f08a';
@icon-success: '\f058';
@icon-error: '\f071';
@icon-warning: '\f071';
@icon-update: '\f021';
@icon-star: '\f005';
@icon-star-empty: '\f006';
@icon-settings: '\f013';
@icon-menu: '\f0c9';
@icon-location: '\f041';
@icon-info: '\f129';
@icon-list: '\f00b';
@icon-grid: '\f009';
@icon-comment-reflected: '\f075';
@icon-collapse: '\f147';
@icon-checkmark: '\f00c';
@icon-bag: '\f290';
@icon-cart: '\f291';
@icon-calendar: '\f073';
@icon-arrow-up: '\f176';
@icon-arrow-down: '\f175';
@icon-search: '\f002';
@icon-next: '\f105';
@icon-prev: '\f104';
@icon-pointer-down: '\f0d7';
@icon-pointer-up: '\f0d8';
@icon-pointer-right: '\f0da';
@icon-pointer-left: '\f0d9';
@icon-flag: '\f024';
@icon-expand: '\f196';
@icon-envelope: '\f0e0';
@icon-compare-full: '\f0ec';
@icon-compare-empty: '\f0ec';
@icon-comment: '\f075';
@icon-up: '\f106';
@icon-down: '\f107';
@icon-help: '\f059';
@icon-arrow-up-thin: '\f176';
@icon-arrow-right-thin: '\f178';
@icon-arrow-down-thin: '\f175';
@icon-arrow-left-thin: '\f177';
@icon-account: '\f007';
@icon-gift-registry: '\f274';
@icon-present: '\f06b';
@icon-trash: '\f1f8';
@icon-edit: '\f040';
@icon-remove: '\f00d';
@icon-print: '\f02f';
@icon-download: '\f0ab';
@icon-private: '\f023';