Bootstrap免费字体和图标网站(值得收藏)


Posted in Javascript onMarch 16, 2017

Bootstrap免费字体和图标网站(值得收藏)

如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图标做了个整合(当然,以后还会不断的更新)。正如你所知,图标字体在一个web网页设计拥有很多优势:它们使用方便,不仅仅是图像,更是一个载体。大小随意缩放,还可以适应各种尺寸的屏幕(包含移动设备,平板电脑等)。

这套集合图标使用起来非常的方便:你只需要点击下载包,将文件添加到你的目录中。在介绍中我们也会对每一个图标有一个简短的描述,让你了解如何使用它们。如果你有兴趣收藏,也可以自己创建一个文档,将它们全部添加进去。我们经常会推荐一些图标网站给大家,除此之外,还有Bootstrap模板和字体,比如Bootstrap templates, 像Jalia 和Gbtags,无论是模板还是素材,我们都将最好的呈现给你。所以,还等什么呢?开始吧。

1. Glyphicons Halflings

首先这包含了200多款字体图标是来自于Glyphicon Halflings。非常出色的一套bootstrap模板图标,要特别感谢Glyphicons里的每一个人。这里除了图标,还有一些大图供你使用和下载。帮助你快速搭建一个网站。

Bootstrap免费字体和图标网站(值得收藏)

如何使用:

Bootstrap免费字体和图标网站(值得收藏)

找到Glyphicons里你需要的内容,然后再html里添加一个图标,内容如下:

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

2. Font Awesome

479款矢量字体图标全部免费,这是什么概念,就是即使你现在不用也要马上收藏的节奏,知道吗!或许你之前听说过这套图标集,因为它在很多网站都出现过。它们给我们提供的是一种方便,虽然曾经有过类似的介绍,但我今天还是要说,在很多图标字体中,我真的觉得它是最棒的-Font Awesome

Bootstrap免费字体和图标网站(值得收藏)

如何使用:

在开始页面,字体使用有一些非常好的方法。最简单的是倒入CDN的一行代码,而且无需下载任何东西,只要贴在HTML中第一节就可以了:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

在这里介绍另一种方法(i like你懂得),在CSS中引用默认字体Font Awesome,下载并复制‘font-awesome'目录到你的项目中,添加链接 “font-awesome.min.css”文件到HTML的第一节上。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" rel="external nofollow" >

当然了,还有很多其他的方法,再介绍一个简单的例子吧:

<i class="fa fa-camera-retro"></i>

这些方法都可以将你喜欢的字体变大变小,更换颜色阴影等,只要你喜欢,无所不能。

3. Elegant Icon Font

由360款优雅的矢量图标字体组成,完全免费使用-elegantthemes。这些图标已经全部进行了优化16*16像素(32px,64px等)的所有倍数。使之细节更加精准和清晰,在任何显示器上的都能呈现最完美的一面,当然包括Retina屏。

如何使用:

不要认为它很难:

下载包并解压

在‘elegant_font'文件夹中你会发现“HTML CSS”子文件夹,把它复制到你的项目中(注意,这里可以重命名哦)

将连接添加到‘style.css'文件中HTML的第一节。

<link rel="stylesheet" href="path/to/elegant-font/style.css" rel="external nofollow" >

你可以在你HTML里添加图标,并且使用CSS来更改它们的样式:

<span aria-hidden="true" class="icon_pencil"></span>

例如:

下面是我如何在Trilli Bi模板中使用图标:

Bootstrap免费字体和图标网站(值得收藏)

HTML:

<div class="features-box-icon">
 <span aria-hidden="true" class="icon_cogs"></span>
</div>

CSS:

.features-box-icon {
 width: 80px;
 height: 80px;
 margin: 0 auto;
 padding-top: 10px;
 background: #e8643e;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 font-size: 50px;
 color: #fff;
 line-height: 50px;
 text-align: center;
}
.features-box-icon span {
 vertical-align: middle;
}

4. Gbtags

Gbtags是一个前端教学非常全面的网站,除了超规模超人气的bootstrap模板和图标外,还教你如何制作网页。它拥有一个非常强大的前端课程库,我一直在思考,只靠一名技术大拿就将网站练就成这般高人气水平实属不易。网站中的模板和图标字体共有几百套并全部免费下载,除了是非常好的资源型网站外,更是学习和交流的平台,推荐指数6颗星。

Bootstrap免费字体和图标网站(值得收藏)

5. Typicons

Typicons带来了336款免费的矢量图标,多用途,像素完美和方便嵌入是它绝对的优势-typicons。

Bootstrap免费字体和图标网站(值得收藏)

如何使用:

首先在你bootstrap的项目中Typicons是很容易使用的。在Typicons的主页,你可以很清楚的了解所有使用图标的方式,当然,你也可以学习自己如何创建并自定义设置图标。首先介绍一个简单的方式:

点击GitHub page here下载页面上的字体文件和缩小的CSS

复制它们到你项目的文件夹

在HTML的第一节加入 “typicons.min.css”

<link rel="stylesheet" href="path/to/typicons.min.css" rel="external nofollow" >

现在在你HTML文件夹中添加图标,可以使用CSS更改它们的样式。

<span class="typcn typcn-arrow-left"><span>

你可以在typicons上找到所有名字相对应的类目。

6. Meteocons

如果你现在正需要一些关于天气的图标,Meteocons应该是不错的一套。它包含了40多种图标,全部免费使用,可以用在商业和个人的项目中。包含不同格式文件:PSD、CSH、EPS、SVG和桌面、web字体,只要你喜欢,它们可以自定义,使用起来更加方便。

要想使用这些图标是非常简单的,更多方法可以参考Meteocons主页。

Bootstrap免费字体和图标网站(值得收藏)

7. Open Iconic

Open Iconie是一款免费的开源图标,包含SVG、网页字体和图标集223种。作为创造者,Open Iconie已然是超清了,在设计时,它们被下降了8个px,所以它们非常的小,但同时在网页浏览速度上,它们又是加载速度最快的。

Bootstrap免费字体和图标网站(值得收藏)

如何使用:

非常简单,如下三步:

从网页中下载软件包

将该文件复制到你的项目中

在HTML的第一节插入“open-iconic-bootstrap.css”

<link rel="stylesheet" href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="external nofollow" >

添加素材到你的HTML文件,可以使用CSS来更改它们的样式:

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

你可以在这里找到所有图标相对应的类别名称。

8. Elusive Icons

Elusive Icons包含了299种免费的图标,开源可作为网页字体和SVG矢量图标。

Bootstrap免费字体和图标网站(值得收藏)

如何使用:

看起来不容易,但实际上非常简单,可以使用CSS方法或者LESS。

CSS方法如下:

下载并复制“fonts”目录到你的项目

复制 “elusive-webfont.css”文件到你的项目

打开“elusive-webfont.css” 文件上面的编辑字体网址,确定它们的指向是正确的。

在HTML第一节插入 “elusive-webfont.css”文件

<link rel="stylesheet" href="path/to/elusive-webfont.css" rel="external nofollow" >

添加图标到HTML代码中,并且使用CSS来更改它们的样式。

<i class="el-icon-user"></i>

以上所述是小编给大家介绍的Bootstrap免费字体和图标网站(值得收藏),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
基于JavaScript实现滑动门效果
Mar 16 #Javascript
基于Vue2.0的分页组件
Mar 16 #Javascript
原生js实现验证码功能
Mar 16 #Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
js中作用域的实例解析
Mar 16 #Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php数据库备份还原类分享
2014/03/20 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python 多进程通信模块的简单实现
2014/02/20 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python with语句和过程抽取思想
2019/12/23 Python
使用K.function()调试keras操作
2020/06/17 Python
python和php哪个容易学
2020/06/19 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
工作保证书范文
2014/04/29 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书