前端基础快速学习-ICON插件

设计页面的时候很多时候需要用到各种小图标,如果都需要加载图片的话会比较累,一个常见的方法是加载特殊的字体。这些特殊的字体符号可以从网上下载插件,比如 http://fontawesome.io/

wKioL1h9ig-xEH-7AACG7ypL2lU438.jpg

 

下载解压之后就可以直接用了。

 

比如新创建一个目录,分门别类的创建好结构,在plugin里面放入下载的插件

 

wKiom1h9ihCQmaO0AABZNjU5AMw636.jpg

 

接下来就是编辑我们的html文件。

 

<link>指定插件css文件的位置

 

<body>里面就可以直接调用了

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css" />

</head>

<body>

    <i style="color: red;" class="fa fa-star" aria-hidden="true"></i>

    <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>

    <i class="fa fa-university" aria-hidden="true"></i>

</body>

</html>

 

 

具体调用的名字可以在网页上点开对应的图标找到

 

wKioL1h9ihDSkRPZAADDTkIhs_A541.jpg

 

 

最后效果如下

wKiom1h9it-hVWGMAAAlE2IBsG4719.jpg

 

 

 

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信,还有更多惊喜哦~

转载于:https://my.oschina.net/learnbo/blog/869082

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值