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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
页面使用密码保护代码
Apr 10 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
element 动态合并表格的步骤
Dec 31 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注入实例
2006/10/09 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
离婚协议书格式
2014/11/21 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
mysql 索引合并的使用
2021/08/30 MySQL