刘华佼的全栈学习记录

5-10 <i class="..."></i>是什么东东

| Comments

使用Icon的方法之一就是用 tag。

  • <head>里包含CDN(内容分发网络)的Icon库;如:

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

在rails中就是安装gem 'font-awesome-rails',并在application.scss中包含@import "font-awesome";

  • 在HTML元素里包含icon的class名称,如:

<i class="fa fa-home" ></i>

方法之二是用<span>,此处不详述。

Icon来源有:

• Font Awesome Icons
• Google Material Design Icons
• Bootstrap Icons

Icon的大小可以用下列class调整:

• w3-tiny
• w3-small
• w3-large
• w3-xxlarge
• w3-xxxlarge
• w3-jumbo

如:

<i class="fa fa-home w3-jumbo" ></i>

也可以通过改变Icon的font-size属性来实现。如:

<i class="fa fa-home" style="font-size: 96px;></i>

参考资料:

测试地址
W3.CSS Icons
Font Awesome Examples

Comments

comments powered by Disqus