导航菜单小图标Font Awesome美化使用

原创 老王  2020-04-08 16:43:49  阅读 1091 次 评论 0 条
摘要:

导航菜单使用前后对比 使用前:使用后:这里说的Font Awesome和阿里的iconfont使用上没有什么区别相比而言阿里的更加丰富化和亲国内特别是自己的服务器请求上。 具体使用方法

导航菜单使用前后对比 使用前后:

导航菜单小图标Font Awesome美化使用  CSS3样式 第1张

这里说的Font Awesome和阿里的iconfont使用上没有什么区别

相比而言阿里的更加丰富化和亲国内特别是自己的服务器请求上。

 使用方法,在html页面加载引用css文件 

 1.下载复制 font-awesome 目录到你的项目中

 2.在<head>处加载font-awesome.min.css如下(目录位置根据自己的站点存放位置自己修改)

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


3.查看 案例 以获取 Font Awesome 的使用方法。 你可以通过设置CSS前缀fa和图标的具体名称,来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素(我们喜欢用更简短的<i>标签,它的语义更加精准)。<i class="fa fa-home"></i> 首页简单的说就是在你需要加小图标的签名加一个i标签,然后给一个类名,具体的名字可以参照官网图标库名字,点开可以详细看见:导航菜单小图标Font Awesome美化使用  CSS3样式 第2张

4.使用 fa-fw 来设置图标在一个固定宽度内,主要用于不同宽度图标无法对齐的情况,尤其在列表或导航时起到重要作用。

<div class="list-group">
  <a href="#"><i class="fa fa-home fa-fw" ></i>&nbsp; 首页</a>
  <a href="#"><i class="fa fa-book fa-fw" ></i>&nbsp; 关于我们</a>
  <a href="#"><i class="fa fa-pencil fa-fw" ></i>&nbsp; 后台应用编辑</a>
  <a href="#"><i class="fa fa-cog fa-fw" ></i>&nbsp; 系统设置</a>
</div>

4.自己可以尝试一下,图标的大小格式可以调整,在类名后面加上个小尾巴即可,不写就是默认大小

阿里的可以自己尝试方法一样!!

这个图标不仅仅只用在导航,常见的QQ、微信、搜索框、选择框的图标都可以使用,和最初的通过一个整张图片然后用position定位显示的主要区别有亮点:1.文件小,加载速度快!2.矢量图形,不变形失真。3.操作简便随意控制或者更改颜色!

本文地址:http://wangfangwen.com/post/37.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?