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 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 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
Protoss魔法科技
2020/03/14 星际争霸
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python显示生日是星期几的方法
2015/05/27 Python
Python 统计字数的思路详解
2018/05/08 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python修改FTP服务器上的文件名
2019/09/11 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python实现IOU计算案例
2020/04/12 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
保时捷设计:Porsche Design
2019/03/30 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
社会发展项目建议书
2014/08/25 职场文书
新闻人物通讯稿
2014/10/09 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫