Font

想当初进入老师的实验室项目组之后的第一个任务虽然不难，但是搜索框的搜索按钮的图标着实让我卡了很长时间，后来找到了一套网上的图标字体库Ionicons。

用法：

1.在CSS文件中写

@font-face{
   font-family: 'Ionicons';
    src: url('fonts/ionicons.eot');
    src: url('fonts/ionicons.eot?#iefix') format('embedded-opentype'),
         url('fonts/ionicons.woff') format('woff'),
         url('fonts/ionicons.ttf') format('truetype'),
         url('fonts/ionicons.svg') format('svg');
}

2.在文件中包含这几个文件

image

3. CSS中写

.form-submit::before {
    font-family: "Ionicons";
    font-size: 23px;
    content: "\f2f5";
}

4.HTML文件中引用ionicons.css文件

这两天复习基础的时候发现了一套更完备而且使用更广泛的图标字体font awesome。

1.国内推荐 CDN：

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

或直接下载到本地引用。

2.可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标。

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

3.大图标
fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增加相对于其容器的图标大小。

<i class="fa fa-car fa-2x"></i>

如果图标在顶部和底部被切断，增加行高即可解决。

4.fa-ul 和 fa-li 类用于替换无序列表中的默认前缀。

<ul class="fa-ul"> 
    <li><i class="fa-li fa fa-check-square"></i>List icons</li> 
    <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li> 
    <li><i class="fa-li fa fa-square"></i>List icons</li> 
</ul>

5.边界和被拉的图标
fa-border（图标边框），fa-pull-right 或 fa-pull-left 类用于拉式引用或文章图标。 （有待实际应用）

6.动态图标

• fa-spin ： spin的速度是linear(匀速),一圈2s
• fa-fa-pulse ：pulse分为八步(图标分8次转完一圈),一圈时间1s

7.旋转和翻转图标

• fa-rotate-*:来控制旋转的度数 ，度数只能是90的整数倍。
• fa-flip-*: 两个参数来控制水平和垂直翻转，horizontal/vertical。

8.最最最最最神奇也是让我一下子就决定抛弃原来的库用这套字体的原因，就是图标堆叠！！！！

父级上设置 fa-stack 类，fa-stack-1x 类用于常规大小的图标，常设置到内层图标，fa-stack-2x 用于较大的用于外层的图标。
fa-inverse 类可以用作替代图标颜色。还可以向父级添加更大的图标类，以进一步控制尺寸。

<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle-thin fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x"></i> 
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

image
image

立个小flag：在js学习进入较平稳的状态后看一下这套图标字体的源码