Magento字体图标的用法和例子
图标是吸引用户进入网站内容的一种简单而有效的方式。它们可以帮助你组织内容,并将页面的不同部分分开。使用图标的主要目的应该是帮助用户在页面上找到信息。
图标
通过图标,你可以快速总结文本的内容。使用一个图标来概括你在段落中想要表达的观点。这将使你的读者更容易理解文章。
创建一个图标
一个简单图标的例子
您可以使用简单的标记将图标放置在任何地方。我们将使用内联HTML元素,例如< span >
并向其中添加适当的类。这些是必修课:集成电路
和图标的名称前缀集成电路,
例如,ic-star
.下面是一个添加星形图标的代码示例:
>一个简单图标的例子
- 如果你改变图标容器的字体大小,图标就会变大。同样的事情也适用于颜色、投影和其他使用CSS继承的东西。
图标大小
ic-lg
ic-2x
ic-3x
ic-4x
要增加图标的大小相对于图标容器的字体大小,使用以下类:ic-lg
(图标大小增加33%),ic-2x
,ic-3x
,ic-4x
,ic-5x
,ic-6x
,ic-7x
或ic-8x
.
<跨类=“ic ic-star”> < / span ><跨类=ic ic-star ic-lg> < / span >ic-lg<跨类="nt"><跨类=ic ic-star ic-2x> < / span >ic-2x<跨类="nt"><跨类=“ic ic-star ic-3x”> < / span >ic-3x<跨类="nt"><跨类=ic ic-star ic-4x> < / span >ic-4x
- 如果你的图标从上到下都被切掉了,
确保你有足够的行高。
内联样式
现在你可以开始在图标上获得更多乐趣了。默认情况下,所有图标都具有与文本相同的颜色,但如果您想更改所选图标的颜色,您可以使用内联CSS样式.添加风格
属性设置为图标元素,并指定颜色。
可以向图标添加内联样式,方法与向HTML文档中的任何其他HTML元素添加样式相同。的风格
属性可以包含任何CSS属性,例如颜色
,字体大小
,文本阴影
等。
< / span >
动画图标
使用ic-spin
类以使任何图标旋转。
图标的例子
Iconboxes
简单iconbox
一个图标框的例子
要在具有背景色的框中显示一个图标(我们称之为iconbox),加上ib
类添加到图标元素。使用可选类ib-hover
时,鼠标悬停在图标框上时,图标框的颜色会发生变化。
背景颜色将自动添加到图标元素。一定要离开< span >
标签为空-否则标签的内容将与图标一起显示,任何额外的空间都可能使图标错位。
 
- 图标的默认背景色和颜色可以在管理面板中配置:
主题设计>颜色>图标盒
Iconbox大小
要增加图标框的大小,使用以下类:ib-size-l
,ib-size-xl
,ib-size-xxl
,ib-size-xxxl
.
图标大小与图标框大小无关,可以通过前面描述的类来增加。例如,add classic-lg
把图标放大一点。
Iconbox形状
要更改图标框的形状,请使用以下类之一:ib-circle
,ib-rounded
,ib-square
.默认情况下,图标框总是圆形的。
Iconbox效果
要为图标框添加引人注目的悬停效果,请使用以下类组合之一。注意,在每种情况下,组合由两个类组成:
ib-ef-1 ib-ef-1a
ib-ef-1 ib-ef-1b
ib-ef-2 ib-ef-2a
ib-ef-2 ib-ef-2b
ib-ef-3 ib-ef-3a
ib-ef-3 ib-ef-3b
图标盒的例子
带有图标的文本块
图标可以帮助您组织内容并分隔页面的不同部分。使用图标的主要目的应该是帮助用户在页面上找到信息,并且通过图标可以快速总结文本的内容。例如,在构建列表时,可以使用图标将注意力吸引到段落和其他内容块,而不是使用标准项目符号。
带图标的简单块
标题的例子
这是一段示例文本。使用这个标记,您可以快速构建各种类型的块。图标是一种有效的……
要创建带有图标的简单文本块,请将文本包装在< div >
元素的功能
类。下面是一个简单的例子:
标题示例
这是一段示例文本。使用这个标记,您可以快速构建各种类型的块。图标是一种有效的……< / p > < / div >
如果你加上左
或正确的
类转换为图标时,图标将从正常的流中取出,并沿其容器的左侧或右侧放置,文本将围绕它。
缩进块
控件,可在左侧显示有缩进的块缩进
类添加到block元素:
要增加缩进的大小,请将以下类与缩进
类:indent-size-l
,indent-size-xl
,indent-size-xxl
,indent-size-xxxl
.
标题示例
这是一段示例文本。使用这个标记,您可以快速构建各种类型的块。< / p > < / div >
块与图标盒和悬停效果
若要更改鼠标悬停在整个块上时图标框的背景颜色,请添加控件feature-icon-hover
类添加到块元素。
如果您增加图标框的大小(通过添加类,如ib-size-xl
),你还需要添加相应的类(在这种情况下:indent-size-xl
)到块元素。它会调整缩进的大小。
- 图标的默认背景色和颜色可以在管理面板中配置:
主题设计>颜色>图标盒
更复杂的例子
下面是另一个更复杂的例子,有额外的标题和嵌套块。要更改图标框的背景颜色,可以使用内联样式.添加风格
属性设置为iconbox元素,并指定背景颜色。
< / span >Above heading
Heading Example
Text below heading
This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.
Example of another text paragraph inside a block. Icons are an effective way to draw users into the content of your store.
Read more...
为中心的块
标题的例子
这是一段示例文本。使用这个标记,您可以快速构建各种类型的块。
控件可将块的元素对齐到中心为中心的
类。
很棒的图标
Font Awesome是一个基于CSS的字体和图标工具包。它提供了一个超过600个矢量图标的集合,可以轻松地自定义(与主题中可用的其他字体图标相同)。
基本字体很棒的图标
使用足总
类和图标名称的内联HTML元素跨度
.下面是创建标志图标的代码示例:
< / span >
使用字体Awesome图标与其他图标类
您可以将字体Awesome图标与本文档中描述的其他图标类一起使用。下面是一个iconbox元素的例子ib
在一个块内使用字体Awesome图标
> fa fa-flag" Style ="background-color: #71d1b3;"> 标题示例
这是一个块内的一小段示例文本。< / p > < / div >
图标块的例子
带iconbox的block示例
Block with iconbox + iconbox效果
段落-有或没有缩进
段落缩进调整为图标框大小
块的标题,图标框和嵌套的段落
孤独的人,神圣的人。我爱你,我爱你。无足虫,无足虫,足虫。在eget metus中。神圣的神圣,崇高的神圣
孤独的人,神圣的人。我爱你,我爱你。无足虫,无足虫,足虫。在eget metus中。神圣的神圣,崇高的神圣