README

Contao 扩展: hofff.com - Iconfont

此扩展提供了一些插入标签，用于插入 FontAwesome 和单个图标。

功能

插入所有 FontAwesome 图标

基本用法

查看 https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

{{icon-fa*::icon-name}} ¹

<i class="fa* fa-icon-name" aria-hidden="true"></i>

固定宽度图标

查看 https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

{{icon-fa*-fw::icon-name}} ¹

<i class="fa* fa-icon-name fa-fw" aria-hidden="true"></i>

边框加拉取图标

查看 https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons

将文本围绕图标包裹 - 左

{{icon-fa*-left::icon-name}} ¹

<i class="fa* fa-icon-name fa-2x fa-pull-left" aria-hidden="true"></i>

将文本围绕图标包裹 - 右

{{icon-fa*-right::icon-name}} ¹

<i class="fa* fa-icon-name fa-2x fa-pull-right" aria-hidden="true"></i>

带边框的图标包裹 - 左

{{icon-fa*-border-left::icon-name}} ¹

<i class="fa* fa-icon-name fa-2x fa-pull-left fa-border" aria-hidden="true"></i>

带边框的图标包裹 - 右

{{icon-fa*-border-right::icon-name}} ¹

<i class="fa* fa-icon-name fa-2x fa-pull-right fa-border" aria-hidden="true"></i>

图标动画

查看 https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

旋转图标

{{icon-fa*-spin::icon-name}} ¹

<i class="fa* fa-icon-name fa-spin" aria-hidden="true"></i>

脉冲图标

{{icon-fa*-pulse::icon-name}} ¹

<i class="fa* fa-icon-name fa-pulse" aria-hidden="true"></i>

旋转图标

查看 https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

顺时针旋转 90°

{{icon-fa*-rotate-90::icon-name}} ¹

<i class="fa* fa-icon-name fa-rotate-90" aria-hidden="true"></i>

顺时针旋转 180°

{{icon-fa*-rotate-180::icon-name}} ¹

<i class="fa* fa-icon-name fa-rotate-180" aria-hidden="true"></i>

顺时针旋转 270°

{{icon-fa*-rotate-270::icon-name}} ¹

<i class="fa* fa-icon-name fa-rotate-270" aria-hidden="true"></i>

水平镜像图标

{{icon-fa*-flip-horizontal::icon-name}} ¹

<i class="fa* fa-icon-name fa-flip-horizontal" aria-hidden="true"></i>

垂直镜像图标

{{icon-fa*-flip-vertical::icon-name}} ¹

<i class="fa* fa-icon-name fa-flip-vertical" aria-hidden="true"></i>

水平和垂直镜像图标（需要5.7.0或更高版本）

{{icon-fa*-flip-both::icon-name}} ¹

<i class="fa* fa-icon-name fa-flip-both" aria-hidden="true"></i>

堆叠图标

请参阅 https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

带有方形背景的图标

{{icon-fa*-square::icon-name}}

<span class="fa-stack">
	<i class="fas fa-square fa-stack-2x" aria-hidden="true"></i>
	<i class="fa* fa-icon-name fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>

带有方形背景的图标 - 仅边框

{{icon-fa*-square-border::icon-name}}

<span class="fa-stack">
	<i class="far fa-square fa-stack-2x" aria-hidden="true"></i>
	<i class="fa* fa-icon-name fa-stack-1x" aria-hidden="true"></i>
</span>

带有圆形背景的图标

{{icon-fa*-circle::icon-name}}

<span class="fa-stack">
	<i class="fas fa-circle fa-stack-2x" aria-hidden="true"></i>
	<i class="fa* fa-icon-name fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>

带有圆形背景的图标 - 仅边框

{{icon-fa*-circle-border::icon-name}}

<span class="fa-stack">
	<i class="far fa-circle fa-stack-2x" aria-hidden="true"></i>
	<i class="fa* fa-icon-name fa-stack-1x" aria-hidden="true"></i>
</span>

带有禁止符号的图标

{{icon-fa-ban::icon-name}}

<span class="fa-stack">
	<i class="fa* fa-icon-name fa-stack-1x" aria-hidden="true"></i>
	<i class="fas fa-ban fa-stack-2x" aria-hidden="true"></i>
</span>

插入您自己的图标字体（您必须自己提供一些CSS）

{{icon::your-icon-name}}

<i class="icon icon-your-icon-name" aria-hidden="true"></i>

您自己的图标字体CSS示例

/* Include your icon font files */

@font-face {
  font-family: "Your icon font name";
  src: url('your-icon-font-filename.eot') format('embedded-opentype'),
  url('your-icon-font-filename.ttf') format('truetype'),
  url('your-icon-font-filename.woff') format('woff'),
  url('your-icon-font-filename.woff2') format('woff2'),
  url('your-icon-font-filename.svg') format('svg');
}

/* base styles for .icon */

.icon {
  font-family: "Your icon font name";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* replace individual icon */

.icon-your-icon-1 {
  &:before {
    content: "\XXXX";
  }
}

安装

通过composer安装扩展： hofff/contao-iconfont。

如果您喜欢手动安装，请在此处下载最新版本： https://github.com/hofff/contao-iconfont/releases

兼容性

• 最小Contao版本：>= 3.5.0
• 最大Contao版本：4.*

依赖关系

• 您必须包含FontAwesome源代码，请参阅 https://fontawesome.com/start