font awesome 页面小图标
font awesome 页面小图标
前段时间做页面,从网上查找资料,发现了一个好用的工具,就是font awesome奥森图标,使用了一下,发现非常方便,而且很灵活,纯css编写,可以和bootstrap结合使用,网页用上之后,瞬间高大上了,遂推荐一下。
下载地址为:http://download.csdn.net/detail/reinhard_yang/9810959
使用方法很简单,页面引入css文件即可
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
表单元素添加样式即可
<span><i class="fa fa-comment"></i> 哈</span>
样式如图
样式大全:http://www.thinkcmf.com/font/icons#new
应有尽有,基本上可以满足日常所需了,是不是很方便,真可谓居家旅行必备良品。
font awesome 页面小图标的更多相关文章
- 添加阿里巴巴图标,让你页面小图标都是CSS3写成
第一步把你想要的小图标添加到购物车里,然后如图下载 第二步下载完了,如下图有这些文件 第三步,把你需要的必要文件放到文件夹中,然后把需要的代码放到一个CSS中,然后引用 备注,这几个文件就是字体,必须 ...
- Web前端开发最佳实践(7):使用合理的技术方案来构建小图标
大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- 浅谈字体小图标font awesome,iconfont,svg各自优缺点
三种都是矢量图(即放大不失真),但是个自又有个自的优缺点, 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font ...
- Font Awesome-用CSS实现各种小图标icon
Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.官网:http://fontawesome.dashga ...
- Vue.js 使用 Font Awesome 小图标
1.安装 Font Awesome npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-soli ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- 用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- 请用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
随机推荐
- SpringBoot服务器部署
注释本地tomcat jar包 jdk版本必须1.8以上 tomcat版本必须8以上 配置tomcat server.xml文件 Swagger 配置
- Python3 tkinter基础 Radiobutton variable 默认选中的按钮
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Lintcode225-Find Node in Linked List-Naive
225. Find Node in Linked List Find a node with given value in a linked list. Return null if not exis ...
- Python单元测试框架unittest
学习接口自动化测试时接触了unittest单元测试框架,学习时参照了虫师编写的<selenium2自动化测试实战>,个人觉得里面讲的例子还比较容易理解的. 一.基础 1.main()和框架 ...
- Windows7下Jupyter Notebook使用入门
目录 一.Jupyter简介 二.Jupyter安装 2.1 python 3安装 2.2 Jupyter 安装 三.Jupyter使用示例 四.Jupyter常用命令 五.其他说明 一.Jupyte ...
- SQL Server 2008 无法安装U890
安装U890,环境检测的时候,却提示数据库不符合要求, 解决方法: 通过修改SQLServer的版本号 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MSSQLServ ...
- allure--下的各装饰器的翻译及自己的总结
翻译图-快捷键 红色字体感觉用的会比较多,起码现在感觉应该是比其他的多一点 lable应该没有什么特殊的用法,只是对下面方法的一个汇总(或者可以这么说,下面的方法是lable更具体的实现) sever ...
- conda命令简单使用
Anaconda是一种Python语言的免费增值开源发行版,用于进行大规模数据处理.预测分析,和科学计算,致力于简化包的管理和部署.Anaconda使用软件包管理系统Conda进行包管理. 1.查看系 ...
- 【转】HDMI之TMDS信号
转自:https://blog.csdn.net/wangdapao12138/article/details/79935821 HDMI传输原理和DVI相同,由Silicon Image公司发明的T ...
- 20165303魏煜第一周kali安装
1.根据网址下载kali 这是kali的下载地址https://www.kali.org 找到download选择Kali Linux 64 bit VMware VM,点击后面蓝色部分开始下载选择6 ...