web开发中插入FontAwesome 图标字体库

%title插图%numFont Awesome是一套绝佳的图标字体库和CSS框架,它是可缩放的矢量图标,用户可以可以对图标的特性进行更改,比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。Font Awesome的产生,为网页设计和Web前端开发人员带来极大的方便

Font Awesome官网:https://www.fontawesome.com.cn/

可以引入在线css。

比如:

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

 

图标的引用:font-awesome图标可以引用在任何地方,只要在该元素的类中加入前缀fa,在加入对应的图标名称。不知道图标的名称,不可以在官网中找到对应的图标,既可以找到对应的图标名称。

<i class=”fa fa-car”></i>、<i class=”fa fa-book”></i>%title插图%num

注:Font Awesome 设计为与内联元素一起使用。 <i>和 <span> 元素广泛用于图标。

%title插图%num

可以直接对图标的属性进行更改,如图标的颜色、大小,并且可以组合不同的图标形成所需的图标等。

<i class=”fa fa-car” style=”font-size:60px;color:red;”></i>

 

Wordpress引用

当前主题目录下的header.php中直接引入文件

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.8.1/css/all.css” integrity=”sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf” crossorigin=”anonymous”>

%title插图%num

比如你要给首页菜单添加图标,直接在菜单名称前加入即可

例如

%title插图%num

效果:

%title插图%num

文章最后更新于 2020-05-08

给TA买糖
共{{data.count}}人
人已赞赏
Wordpresswordpress美化前端

wordpress后台登录界面美化

2019-3-31 20:18:28

WordpressWordPress优化wordpress美化前端

为wordpress文章添加额外功能[移植自DUX主题]

2019-5-4 10:55:15

2 条回复 A文章作者 M管理员
  1. 为什么我添加不了呢,也用的是Grance主题

    • 不可能的,是你插入的方式不对