Font Awesome技术解决导航栏图标问题

需求:项目中需要在左侧导航栏在每一个功能目录左边显示图标,经过调研,发现使用font awesome技术,利用阿里iconfont图标,生成字体图标用在项目中即可达成目标。

1、首先,打开阿里图标官网,挑选需要的图标加入购物车,然后加入项目下载相应压缩包;

阿里矢量图标库guanwan:http://www.iconfont.cn/plus

选择图标->加购物车->点击右上角购物车->点击添加至项目,若没有则新建(项目名称任意填即可)->下载至本地即可得到需要的自体压缩包文件->解压,找到项目需要的几个文件并拷贝至项目中。

项目必须需要的文件有以下五个,其他可拷贝也可不拷贝:

将这5个文件分别拷贝至项目对应目录,目录示例(自定义的文件夹)如下:

 

2、然后,修改iconfont.css文件;

主要需要修改引用的四个文件(iconfont.eot,iconfont.woff,iconfont.ttf,iconfont.svg)的相对路径:

@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1586877904068'); /* IE9 */
  src: url('../fonts/iconfont.eot?t=1586877904068#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('../fonts/iconfont.woff?t=1586877904068') format('woff'),
  url('../fonts/iconfont.ttf?t=1586877904068') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg?t=1586877904068#iconfont') format('svg'); /* iOS 4.1- */
}

3、在需要用到字体图标的jsp等文件引用iconfont.css;

<link href="${ctxStatic}/bootstrap/customfont/css/iconfont.css" type="text/css" rel="stylesheet" />

4、最后就可以通过以下类名引用图标,如下是一部分字体图标的content图标编码。

.icon-icons03:before {
  content: "\e69c";
}
.icon-shengouheimingdan:before {
  content: "\e63b";
}
.icon-shujugengxin:before {
  content: "\e616";
}
.icon-jiansuo:before {
  content: "\e612";
}

注意引用时,需要先添加iconfont类名再添加 icon图标名字,才能生效。

 

总结:下载阿里自带的图标来实现iconfont,有一个好处,是可以在自己所建立的项目中继续追加图标,如果一段时间后发现图标不够用,想要新加一些图标,可以用这种方式,只要将新增的图标放进购物车加入原来的图标项目文件夹下(即你的购物车中项目目录)再次下载压缩包,然后将新的压缩包文件替换web项目对应文件夹下的文件即可。

参考网站:https://blog.csdn.net/weixin_36185028/article/details/53416185

https://blog.csdn.net/qq_41061352/article/details/79414167

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值