首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >web开发中插入FontAwesome 图标字体库

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

作者头像
AlexTao
修改于 2019-07-22 04:26:14
修改于 2019-07-22 04:26:14
2K0
举报
文章被收录于专栏:钻芒博客钻芒博客

Font 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>

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

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

<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">

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

例如

效果:

本文源自:钻芒博客

https://www.zmki.cn/3306.html

本文系转载,如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Font Awesome 一套绝佳的图标字体库和CSS框架
在bootstrap框架的使用中,字体图标必不可少,Font Awesome 一套绝佳的图标字体库和CSS框架,值得学习。 网址:http://fontawesome.dashgame.com/
王小婷
2018/07/04
1.2K0
Font Awesome 一套绝佳的图标字体库和CSS框架
在bootstrap框架的使用中,字体图标必不可少,Font Awesome 一套绝佳的图标字体库和CSS框架,值得学习。
王小婷
2025/05/18
2490
Font Awesome 一套绝佳的图标字体库和CSS框架
如何应用Font Awesome矢量字体图标
本文介绍了如何使用Font Awesome图标字体库在网页中添加社交网络图标、Web应用程序图标和编辑器图标等,同时介绍了如何结合Bootstrap框架提高用户体验。
古时的风筝
2018/01/08
1.8K0
如何应用Font Awesome矢量字体图标
FontAwesome基础知识
注意:fa前缀最新版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。
老猫-Leo
2023/12/11
6640
Font-Awesome(一套绝佳的图标字体库和CSS框架)
官方链接至 http://fontawesome.dashgame.com/ 它跟阿里矢量库不同的是 他不需要引入一些繁琐的文件 只需要几个命令就可以直接使用icon图标 方法一 : css导入 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 方法二: 定义安装 npm install font-awesome-sass 复制 font-awesome/ 目录到您的项目中。 打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ,然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录
河湾欢儿
2018/10/11
2.4K0
Font-Awesome(一套绝佳的图标字体库和CSS框架)
Hexo插件及Next内置样式集
First add configuration in _config.yml from your hexo project.
老猫-Leo
2023/12/11
2560
在网站或桌面应用使用Font Awesome图标库
Font Awesome介绍 Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。 一个字库,675个图标 仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。 无需依赖JavaScript Font Awesome完全不依赖JavaScript,因此无需担心兼容性。 无限缩放 无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。 如言语一般自由 Font Awesome完全免费,哪
程序你好
2018/07/20
2.4K0
使用 Fontawesome 的 React 组件
Fontawesome 是一套图表字体库框架,我们经常在项目中用到它的各式各样的图标,本文介绍的是如何使用其 React 组件形式的包应用到项目中。
我与梦想有个约会
2020/01/04
2.3K0
04-移动端开发教程-在线字体图标
本文主要介绍了在移动端网页开发中,如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类,然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具,以及如何在这些工具中使用自定义字体。
老马
2018/01/02
3.6K0
hexo 插件及 next 内置样式集
First add configuration in _config.yml from your hexo project.
Cell
2022/02/25
5510
纯代码实现WordPress文章设置隐藏内容公众号可见
网上找了一圈找到了龙笑天下博主写的一篇文章:WordPress 文章部分内容关注微信公众号后可见
AlexTao
2019/07/22
1.5K0
纯代码实现WordPress文章设置隐藏内容公众号可见
get几个小技能:图标库使用技巧,css3文本小技巧
目前自己常用的图标库有两种: 1. 插件、库里面自带的图标库:如 * boostrap * element ui * vant * layui * H-ui * mui 等等 这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库 这些图标库虽然官网都有介绍,但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。
不愿意做鱼的小鲸鱼
2022/09/24
1K0
get几个小技能:图标库使用技巧,css3文本小技巧
从零开始学 Web 之 CSS3(六)动画animation,Web字体
好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。
Daotin
2018/08/31
1.5K0
从零开始学 Web 之 CSS3(六)动画animation,Web字体
CSS 制作爱心
方案1 纯CSS+HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style>
无道
2019/11/13
1.1K0
CSS 制作爱心
第八十四节,css布局小技巧及font-awesome图标使用
font-awesome图标是一个css的插件包,是一个以字体文件方式集成的图标,首先要下载插件包
全栈程序员站长
2022/07/19
2.1K0
第八十四节,css布局小技巧及font-awesome图标使用
Font-Awesome如何引入矢量字体图标
💬个人网站:【芒果个人日志】​​​​​​ 💬原文地址:Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn) 💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入的研究。 💅文章概要:在开发网页的过程中,我们
THUNDER王
2023/02/23
8480
Font-Awesome如何引入矢量字体图标
WordPress导航菜单图标字体插件font awesome 4 menus纯代码版
换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。 不过,
张戈
2018/03/21
3.2K0
WordPress导航菜单图标字体插件font awesome 4 menus纯代码版
如何将 Font Awesome 从 v4 迁移到 v5 并优化图标加载
在这篇博客中,我将讨论如何将 Font Awesome 从 v4 迁移到 v5,并选择合适的方式加载图标库,帮助你优化图标加载性能。
alanzeng
2025/01/14
3270
体验“超级无敌”的文件上传组件bootstrap fileinput
网页开发最最重要最最基本的就是富文本编辑器和文件上传,开始我迷信百度的ueditor和webupload,结果总是别扭,看来不能迷信BAT啊。富文本用了froala,文件上传早点用bootstrap fileinput那多炫啊。
hotqin888
2019/11/04
2.8K0
基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表。其中菜单信息的图标样式,也是从数据库里面获取的,因此要求我们能够动态取得Bootstrap里面的各种图标定义了。本篇主要介绍如何提取Bootstrap的图标信息,存储到数据库里面为我所用。 1、菜单的显示及各种Bootstrap图标 我们从下图可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都有一个图标,虽然大小不同,我
MonroeCode
2018/02/09
1.8K0
基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
推荐阅读
相关推荐
Font Awesome 一套绝佳的图标字体库和CSS框架
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档