2025年5月24日 星期六 乙巳(蛇)年 二月廿六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 软件应用 > 开发工具(IDE)

Octicons 是 GitHub 网站出品的开源字体图标库

时间:12-14来源:作者:点击数:12
CDSY,CDSY.XYZ

Octicons 是一款开源免费字体图标库,也是 GitHub 目前使用的图标库,GitHub 已将这个图标开源分享给广大的开发者使用,Octicons 包含多种形式的图标文件,包括字体图标、SVG 文件等。

在你的项目中使用 Octicons

1、创建一个新文件名称为bower.json,如果你已经有一个请跳过这个步骤。

2、添加一个Octicon的新行,指向正确的库:

  • {
  •   "name": "my_great_project",
  •   "dependencies": {
  •     "octicons": "*"
  •   }
  • }

3、运行 bower install ,Octicon的所有文件将自动被下载到bower_components/octicons文件夹

4、在<head>中引入octicons.css样式文件

  • <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">

5、在你的HTML文件中添加下面的代码

  • <span class="octicon octicon-microscope"></span>

调整图标字体大小

Octicons 的字体图标大小设置为 16 的倍数最好看,你可以使用 CSS 属性更新字体大小。例如:

  • .octicon {
  •   font-size: 32px;
  • }

Octicons 的图标是不等宽的。这让他们在某些环境中显示的很难看,但它意味着他们不会很好地通过默认的堆栈。如果你打算 Octicons 堆栈,如导航,您将要添加一些 CSS 使他们相同的宽度和中心。例如:

  • .navigation .octicon {
  •   width: 16px;
  •   text-align: center;
  • }

相关链接

  • Github地址:https://github.com/github/octicons/
  • 预览地址:https://octicons.github.com/
CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐