分类 设计,切图,字体工具 下的文章

Bootstrap3字体图标(Glyphicons) 访问:43点赞:0

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。 字体图标列表 点击这里,查看可用的字体图标列表。 https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

Font-Awesome字体图标 访问:44点赞:0

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 一套字库, 675个图标 FontAwesome是一种带有网页功能的象形文字语言,并收集在一个集合里。

Ionicons图标字体 访问:45点赞:0

ionicons 包含超过 430 个免费漂亮的程序图标。该图标集采用 MIT 许可证,你可在商业应用中使用。 官网:http://ionicons.com/ 资源地址:https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css 使用方法:引入ionicons.css 在html中给i标签添加.ion类名和字体图标名,如:即可 全部demo: 另外如果将ionicons.min.css下载到本地引入,需要同时安装font文件,如下图: ![请输入图片描述][1] [1]: https://upload-images.jianshu.io/upload_images/3600793-ddf198709c6a20d1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/487 将ionicons.css放在css文件夹下,将css文件夹和fonts文件夹放在同级。

browsersync 访问:47点赞:0

中文网http://www.browsersync.cn/ ![请输入图片描述][1] [1]: http://%E7%9C%81%E6%97%B6%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%AD%A5%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7 本质是启动一个代理服务器,监听服务器变化。支持所有文件的实时监听。 不需要装服务器插件,只依赖于node.js插件,要装Broswer-Sync插件,是一个局部的刷新。可以实现手机浏览器、PC浏览器等多个浏览器的同步,包括视图同步和交互同步。 要在前端项目文件下进行监控,如果在根目录下启动,会慢,因为监控的文件太多。

liveReload 访问:32点赞:0

![请输入图片描述][1] [1]: https://img-blog.csdn.net/20170505142516014?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ3hpbmdwYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast liveReload监控所有文件的修改。样式文件、html文件、图片文件、js文件等的修改以及实时浏览器显示。 需要安装liveReload插件(在Chrome网上商店下载)和node.js中livereload插件 https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei 本质做了个F5操作。