web前端之 CSS引入第三方插件

最新推荐文章于 2022-05-07 14:22:57 发布
最新推荐文章于 2022-05-07 14:22:57 发布
阅读量456 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazy_zhangcong/article/details/88374411
版权

web前端之 CSS引入第三方插件

引入第三方图标插件 - fontawesome

官网地址：http://fontawesome.io/
1、下载图标插件包
下载地址：https://codeload.github.com/FortAwesome/Font-Awesome/zip/master
2、解压压缩包
866929-20160817145553765-1930020194.png
3、导入插件的css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="Font-Awesome-master/Font-Awesome-master/css/font-awesome.css" />

</head>
<body>


</body>
</html>
4、引用图标代码
  • 首先打开图标展示地址 http://fontawesome.io/icons/

  • 点击需要使用的图标(比如我要使用小汽车的图标)

    866929-20160817143426312-903579085.png

  • 找到显示小汽车图标的代码

    866929-20160817143928828-2031254000.png

  • 使用显示小汽车图标的代码

    代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="Font-Awesome-master/Font-Awesome-master/css/font-awesome.css" />

</head>
<body>

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

</body>
</html>
显示效果
866929-20160817144042234-966611048.png

  • 查看更多的例子

    866929-20160817145300656-833835270.png

posted on 2016-08-17 14:35 奋斗中的码农 阅读(...) 评论(...) 编辑 收藏

crazy_zhangcong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue基础篇之第三方插件的使用与安装
fvcvv的博客
12-08 1781
Vue基础篇之第三方插件的使用与安装
前端常用第三方库
Litt_White的博客
12-12 2869
常用的第三方插件
vue中引入css第三方库的两种方法（以bootstrap.css为例）
Canace_Xyxjjcaw的博客
03-22 2918
方法1：在存放静态资源的assets里面新建一个文件夹css，把bootstrap.css放到新建的文件夹css中，然后在App.vue页面引入bootstrap.css 【通过import引入，vue脚手架会进行非常严格的检查】 方法2：在public里面新建文件夹css，把bootstrap.css放到新建的文件夹css中，在public下面的index.html文件中引入bootstrap.css ...
前端构建工具~第三方模块Gulp
weixin_45558363的博客
05-07 281
第三方模块Gulp 基于node平台开发的前端构建工具，将机械化操作编写成任务，想要执行机械化操作时，执行一个命令行任务就能自动执行了。 用机器代替手工，提高开发效率。 gulp能做什么？ 1.项目上线HTML,CSS,JS文件压缩 2.语法转换（less,es6) 3.公共文件抽离 4.修改浏览器自动刷新 gulp使用 1.使用npm install gulp 下载gulp库文件 2.在项目根目录下建立gulpfile.js文件 3.重构项目的文件夹结构 用src目录放置源代码文件 用dist
前端学习笔记之 第三方插件
weixin_30329623的博客
02-28 123
主要内容：jQuery UI, 其他插件，***封装自定义插件 学任何行东西步骤： 　　1.上官网/百度知道：查是是什么 　　2.上官网看DEMO 　　3.上官网看手册： 1.jQuery UI: 什么是：jQuery官方出的，基于jQuery实现的，比jQuery跟简化的UI组件和函数库 UI:用户界面 UI组件:由HTML,CSS,组成的实现一个专门功能的UI程序和效...
通过webpack引入第三方库的方法
10-18
【Webpack 引入第三方库的方法】 在现代前端开发中，Webpack 是一款强大的模块打包工具，它可以帮助我们将项目中的各种资源，如 JavaScript、CSS、图片等，进行编译和打包。在实际开发过程中，我们常常需要引入第三...
详解webpack提取第三方库的正确姿势
08-28
在 `webpack.dll.config.js` 中，我们定义了需要打包的第三方库，并配置了输出文件和 DLL 插件： ```javascript const webpack = require('webpack'); const library = '[name]_lib'; const path = require('path')...
订单生成系统前端源码html+CSS+js+图片.zip
最新发布
06-24
标签“软件/插件”暗示这个系统可能包含了第三方库或框架，如jQuery、Vue.js、React或Angular，它们可以帮助简化前端开发，提供动画效果、路由管理、状态管理等高级功能。开发者可能通过引入CDN链接或本地文件来使用...
web前端-设计网站页面
03-17
通过修改Sass变量或使用第三方工具，我们可以改变Bootstrap的默认颜色、字体和其他视觉元素，以创建符合品牌风格的独特设计。 在实现响应式设计时，Bootstrap的媒体查询（Media Queries）和断点（Breakpoints）功能...
购物网站web前端
11-02
5. 支付集成：如果网站支持在线支付，需要集成第三方支付平台的API，处理支付流程的安全性。 6. 用户评论和评分：允许用户对购买的商品进行评价和打分，促进社交互动。 7. 推荐系统：根据用户的浏览历史和购买行为...
前端插件集合及demo
03-02
资源包括jqGrid(数据表格),jquery-cookie(cookie操作),jquery-ocupload(一键上传),jquery-uploadify(异步上传),jquery-validation(表单验证),zTree(树形菜单),vue,百度(ueditor,map),sweetaler(提示框),zDialog(弹框),juicer(模板),echarts(图表),highlight(代码高亮),zoomimage(图片框),bootstrap(前端框架),easyui(前端框架),awesome(图标),pure(样式),cityPicker(区域四级联动),Color-Picker(颜色选择器),jquery-Distpicker(区域三联动),My97DatePicker(日期选择器)等
前端软件以及相关插件第三方库基本使用
Dipper_Dubhe的博客
03-23 2827
安装软件 Visual Studio Code 软件网址：https://code.visualstudio.com/ 安装插件 Chinese (Simplified) (简体中文) Easy LESS（自动将less转化成css文件，需要配置） 配置： 第一， 文件 > 首选项 > 设置 第二， 在扩展里面找到Easyless点一下 setting.json 第三，在json配置中加入，less.compile(less配置) "less.compile": { "compre
前端第三方插件
聂培志的博客
11-28 277
动画 tweenmax js动画库 tweenJS js动画库 easeljs js列表动画 animation css动画 音频/视频 soundjs 处理音频 资源加载 preloadjs 预加载 图标 awesome css图标库 阿里iconfont 自定义图标 图表 d3Js 绘制图表 chartJS H5绘制图表 pdf js...
前端常用的插件
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
05-17 884
我们在写前端页面的时候，经常引用第三方插件，我们可以通过下载和npm安装的方式，适用于VUE或原生js 一、下载方式， 下载文件导本地，把js文件放到项目中，引用其路径即可。如：importxxxx from'../../build/js/xxxx.js'; 如果是原生的html方式，则：<script type="text/javascript" src="/build/js/xxxx.js"></script> 二、安装方式 一般是通过npm或cnpm方式安装， ..
前端项目三方插件选择
angwanli1764的博客
12-02 313
啧啧,最近公司做了个B2B的全新项目,既然是新项目肯定要实现很多功能。下拉列表，滚动效果，表格等等。所以选择一些好的三方插件可以提高开发效率，那就来看看我们选择了哪些插件。 一. 下拉列表: select2: http://select2.github.io/ 此控件兼容IE8,IE8以上，firefox和chrome...
nuxt.js 引入第三方插件
热门推荐
dexing07的博客
12-26 2万+
plugins 属性配置src: String (文件的路径) ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。 plugins 属性使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件。例如 (nuxt.config.js)：module.exports = { plugins: ['~plugins/vue-notifica
谷歌浏览器 引入插件内css
走错路的程序员
11-18 3710
//引入插件内css //cssurl = ./meun/meun.css function includeCss(cssurl) { //csspath = ./menu/ var localCssUrl = chrome.extension.getURL(cssurl); $.get(localCssUrl, function (data) {
前端常用插件、工具类库汇总（上）
ailusummer的博客
11-12 1万+
前言 在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。 下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。 函数库 Loda...
webpack:使用expose-loader 解决第三方库的插件依赖问题
HangMine的博客
11-10 4864
安装 node模块  npm install jquery --save  npm install bootstrap --save 安装 expose-loader npm install expose-loader --save-dev 修改 webpack.config.js：为jquery模块暴露多个变量jQuery、$、scrollable   module: {
HTML5及CSS3web前端开发技术习题答案解析.docx
11-26
audio和video元素的引入，使得音频和视频的播放和控制无需依赖第三方插件；HTML5的数据存储和处理能力包括Web Storage（localStorage和sessionStorage）、WebSQL和IndexedDB，为离线应用和大数据处理提供了支持；...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值