如何将图标按钮粘贴到导航栏的左侧
将图标按钮粘贴到导航栏的左侧可以通过以下步骤完成：
- 了解导航栏的布局：导航栏通常由一系列链接或按钮组成，并位于网页的顶部或侧边。在前端开发中，常用的导航栏布局有水平导航栏和垂直导航栏两种。
- 创建导航栏的HTML结构：使用HTML和CSS创建导航栏的基本结构，可以使用
<ul>和<li>元素创建导航栏的列表项，通过CSS设置样式，如背景颜色、文字颜色、间距等。 - 导入图标库或自定义图标：在前端开发中，可以使用图标库或自定义图标来实现导航栏的图标按钮。常用的图标库包括Font Awesome、Material Icons等。通过在HTML中引入图标库的CSS文件，并在对应的元素中使用相应的图标类名，即可将图标添加到导航栏中。
- 设置图标按钮位置：根据需要将图标按钮放置在导航栏的左侧。可以使用CSS的浮动、定位或Flex布局等技术来调整图标按钮在导航栏中的位置。例如，使用
float: left可以将图标按钮靠左对齐。
以下是示例代码，将Font Awesome图标粘贴到水平导航栏的左侧：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
li {
float: left;
}
li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.fa {
margin-right: 5px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><i class="fa fa-home"></i>首页</a></li>
<li><a href="#"><i class="fa fa-user"></i>个人信息</a></li>
<li><a href="#"><i class="fa fa-cog"></i>设置</a></li>
</ul>
</body>
</html>在上述示例代码中，使用Font Awesome图标库的CSS文件，并在每个列表项的 <a> 标签中使用对应的图标类名，例如fa-home表示首页图标，fa-user表示个人信息图标，fa-cog表示设置图标。使用<i> 标签包裹图标类名，即可显示相应的图标按钮。
以上是将图标按钮粘贴到导航栏左侧的一种方式，具体实现方式可以根据实际需求和开发框架来选择和调整。如需了解腾讯云相关产品和产品介绍，请访问腾讯云官方网站：https://cloud.tencent.com/。
相关·内容
3回答
如何将导航栏添加到未嵌入到导航控制器中的视图控制器(实际上是集合视图控制器)？我试着将导航栏拖到视图上，但它就是不粘。这是在斯威夫特。
浏览 0提问于2016-06-24得票数 8
回答已采纳
我一直在使用AppCompact 21中提供的最新Toolbar Widget和导航抽屉进行材料设计。
我关心的是，如何将导航抽屉图标设置到工具栏的右侧。虽然我可以通过设置android:layout_gravity="right"从右打开导航抽屉，但是导航图标仍然显示在工具栏的左侧。
当我使用旧的Action Bar时，我可以用自定义抽屉图标将按钮放在右边的自定义操作栏上，并点击自定义导航抽屉图标打开/关闭抽屉。
使用工具栏在右侧设置导航抽屉图标的方法是什么？
如何为其创建自定义视图？
浏览 4提问于2014-12-10得票数 12
1回答
我想做一个后退和前进导航从一开始。因此，我在导航栏中添加了一个按钮，但是我希望在导航栏后面有一个确切的iOS图标和后面的文本。
我怎样才能自己得到这个东西而不需要以编程方式导航呢？我用故事板。
忽略背景色，我指的是这个图标：
我不使用导航控制器，我使用页面视图控制器，这就是原因。如果文字是图标的一部分，我不知道这个图标是如何工作的，所以我希望有人知道。
浏览 3提问于2014-05-02得票数 0
回答已采纳
3回答
iPad上的Safari在顶部有这个条(它在iOS上不是叫做“工具栏”，对吗？)，有些图标和输入是用来搜索的。
如何将这些按钮和输入字段放入导航栏？它甚至是导航条吗？据我所知，导航栏左边有一个按钮，右边有一个按钮，中间有一个标签。但是如何从Safari创建这样的“顶级”酒吧呢？
如果我在XCode 4.0中并选择“基于视图的应用程序”，那么我应该设置在ViewController >模拟度量>顶部栏>导航栏中吗？以及如何给它添加按钮？
编辑
抱歉，混淆了-我不知道是否正确的方式是添加到导航栏。我只是想了解一下这样的“顶部”栏是如何制作的。这类项目属于哪种观点？
浏览 3提问于2011-04-30得票数 1
1回答
我正在尝试创建一个UIBarButtonItem，它看起来像iPod.app上的"list“按钮，所以我有两个问题：
如何将图标设置成像iPod的图标？我在其他应用程序中看到它，但在xcode上找不到它。(显示在“现在播放”屏幕上导航栏右侧的图标)如何将UIBarButtonItem的图像设置为不使用默认边框？
浏览 2提问于2012-01-20得票数 0
1回答
自举3肚脐杆高度
、、、
我使用两个肚脐按钮在导航栏与我的主页。
但这些按钮与使用图标不同。
这是捕捉图像。
图像链接：
见图片，右侧，两个肚脐按钮的高度是不同的.
如何将两个肚脐按钮更改为相同的按钮？
浏览 2提问于2014-11-09得票数 1
回答已采纳
1回答
我正在尝试弄清楚如何制作使用系统图标或图像图标的自定义导航栏按钮。我按照下面的教程来设置自定义导航栏背景，并创建自定义文本按钮，现在我想创建像教程中那样的按钮，但使用图标而不是文本。
有人知道如何创建带有图标的自定义导航栏按钮吗？
谢谢!
浏览 1提问于2011-02-20得票数 2
2回答
导航栏项目图标未正确显示
、、、、
导航栏项目图标颜色为蓝色或单色。无法在导航栏中呈现原始图像。我已经尝试了Assets.xcassets属性检查器中的作为原始渲染选项
想要使用此
但遗憾的是，当尝试通过故事板进行选择时，它只在一个颜色方块中显示它，即只有蓝色、白色或任何其他颜色。如何将原始图像用于栏按钮项。
浏览 0提问于2016-06-16得票数 0
1回答
我尝试了所有的冲浪，但没有得到解决方案。另外，我是swift的新手，所以请多多帮助！我有一个视图控制器--登录页面，它连接到另一个视图控制器-- CoreView.swift。我已经在CoreView ViewController中创建了5个子视图。我想添加一个选项卡栏，在那里，用户可以点击选项卡栏的图像和相应的子视图应该打开。此外，帮助我添加图像作为子视图图标。图标不显示。
另外，当我尝试在导航控制器上放置后退按钮时，我可以设置标题和提示消息，但不能在子视图中设置后退按钮，为什么？
谢谢!
我有以下更改。但还是不走运..
浏览 2提问于2016-06-24得票数 2
1回答
棒导航条延迟
、、、、
这个问题我就是没法想清楚。导航。在页面顶部粘贴栏，并与用户一起上下滚动，但延迟至少10秒才能完成。
基本上，一旦页面加载，对于第一个10+秒，导航条不会粘粘，但是10秒后，如果您滚动并运行非常好，直到页面或站点上的另一个页面被加载时，它就会粘粘。
我精通HTML和CSS，但对Javascript / PHP / jquery知之甚少(我认为这是导航条粘性效应背后的原因)，所以我不确定应该在这里再现哪些代码。
浏览 4提问于2013-12-25得票数 0
回答已采纳
问题重现：
1.打开vs代码2.单击左侧导航栏中的搜索图标3.现在资源管理器图标自动隐藏。
如何自动禁用"explore“隐藏。
(我总是按control + shift +E来获取资源管理器)
浏览 18提问于2019-11-29得票数 0
我在一个tabbarcontroller应用程序的导航栏中使用了一个分段控件。
问题是，在将分段控件添加到导航栏后，我的视图标题会从that控制器中消失。
我该如何解决这个问题？
浏览 1提问于2010-07-08得票数 0
回答已采纳
我有一个简单的bootstrap 4导航栏，还有一个侧边栏，当我切换它时，整个侧边栏都隐藏了，有没有办法让它只显示侧边栏列表的图标？
浏览 11提问于2019-09-22得票数 1
2回答
在仪表板上的应用程序中，有一个类似于下面的图像的应用程序栏。
如图像所示，我有一个工具栏，它当前显示导航抽屉。
在导航抽屉中，我可以导航到一个片段A，它替换工具栏下的TAB区域，如下图所示。
有任何方法，我可以添加这样的两个工具栏，在其中我可以显示导航抽屉图标和后退按钮在一个片段内一起？
浏览 4提问于2016-07-18得票数 0
回答已采纳
当导航栏缩小时，如何将其徽标动画化以滑入导航栏？我可以让滚动条在滚动线上缩小，但不像他们那样做，我也弄不清楚他们是如何将图标动画化的。我真的很想在导航栏上有这个功能。
浏览 1提问于2014-07-24得票数 0
回答已采纳
1回答
当我单击导航栏中的一个按钮时，我只想翻转一个图标，而不是导航栏中的所有图标。现在，当我单击一个按钮时，所有的图标都会翻转，而不是我单击的那个图标。
下面是一个演示：
任何帮助都是非常感谢的。
浏览 2提问于2021-03-19得票数 1
回答已采纳
1回答
你好，我目前在Filemaker Pro 17高级工作。我有一个导航栏，我需要添加一个新按钮。当我在导航栏中添加一个新按钮时，它只显示在我添加了额外按钮的选项卡中。所以我的问题是，我如何添加一个按钮一次，并让它显示在我的所有导航栏？
浏览 5提问于2018-12-06得票数 0
我在导航栏中有搜索图标，在TableViewHeader中有UISearchBar。我想隐藏UISearchBar，但在以下情况下显示和隐藏：
UISearchbar显示：单击搜索图标，然后消除导航并显示它。
UISearchBar隐藏：按“取消”隐藏搜索并显示导航。
请救救我！
谢谢。
到目前为止，这就是我所做的。
- (void) viewDidload{
self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectZero];
self.searchBar.placeholder = @"Sear
浏览 1提问于2013-12-04得票数 0
3回答
我看到很多iPad的应用程序都有很酷的标题栏。这些似乎是导航栏和工具栏的组合。他们通常有一个后退按钮和一个标题以及男人的其他按钮。导航栏仅支持左侧项目、右侧项目和标题视图。而且工具栏并不真正支持后退按钮或标题。
那么，如何在UINavigationController驱动的应用程序中实现这些带有许多按钮的丰富导航栏呢？
浏览 3提问于2010-04-10得票数 12
回答已采纳
我想在选项卡控制器的导航栏上添加文本字段和搜索图标.请检查附加图像。
备注：这是主屏幕，如果用户单击任何菜单项，它将转到detailvc，因此我在homevc上添加了一个导航控制器并将其隐藏。
我想显示搜索图标和文本字段在导航栏的选项卡。我该怎么做？
浏览 4提问于2016-10-13得票数 0
1回答
我正在实验的材料侧导航和角6/7。我想要实现的是显示在接下来的两张图片。
该应用程序的侧边导航崩溃：
具有扩展侧导航的应用程序：
简言之：
可以用按钮打开和关闭的侧导航。
内容上方的固定工具栏。
可滚动内容。
基本结构如下，暗示的。
<mat-sidenav-container>
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>Main content, toolba
浏览 1提问于2018-12-27得票数 4
回答已采纳
我正在尝试使用页脚导航栏在忙/闲状态之间切换。如果用户点击免费，“检查”图标应该出现在免费导航栏按钮上。当点击忙时，“检查”应从“空闲”按钮移除，并添加到“忙”按钮。我如何才能做到这一点呢？我可以从一个图标更改为另一个图标，但不能从无图标更改为任意图标，反之亦然。
谢谢你的帮助！
浏览 5提问于2012-03-08得票数 1
回答已采纳
2回答
我想将导航控制器栏按钮项设置为图像。
我已经阅读了以下内容-
我知道如何将其设置为镜像。我实际上正在寻找设置为设置齿轮，在栏按钮项(如齿轮图标)。我以前在其他应用程序中看到过这种情况，我想知道是否有一个默认样式来初始化它，或者通常情况下，这是通过上面的图像路由实现的。
如果这是上面的，谁知道这个(某种)默认图像样式的图标在哪里，或者我需要做一个吗？
浏览 2提问于2012-10-10得票数 2
回答已采纳
2回答
我需要隐藏汉堡包图标
这是我的工具栏
我需要隐藏导航栏的默认汉堡图标，并从另一个按钮加载它，导航栏需要出现在附件图标上，点击我的工具栏，并需要消失时，我点击外面(任何地方).Can这是做吗？
浏览 4提问于2017-11-30得票数 5
2回答
我想在导航栏的标题旁边放一个图标。我不希望将其实现为自定义titleView，因为那样我将需要为放在堆栈上的每个控制器创建一个自定义titleView (并且我有相当深的嵌套)。我目前正将其作为UIImageView添加到navigationBar中。我的问题是准确地计算这个图标的水平位置。这取决于后退按钮的宽度，每次后退按钮都有另一个标题。如何计算这个后退按钮框？在谷歌上搜索似乎没有带来任何合理的结果。
提前感谢
浏览 3提问于2010-12-01得票数 1
我需要以这样的方式定制我的xcode项目中的导航栏(，如下图所示)
导航栏的高度right.country增加了，在中间有一个搜索栏，左有一个主按钮，在帮助按钮右侧有一个帮助按钮和一个帐户访问。我想使这个导航栏在我的应用程序的所有屏幕上可用。
如果你还需要更多关于这个问题的信息，请问我。
浏览 3提问于2017-02-21得票数 1
回答已采纳
你好，谢谢你的阅读。我压力很大，准备认输。
在上，顶部的栗色工具栏是粘粘的，下面还有主导航。问题是，工具栏中的3个链接直到页面向下滚动，条形图变得粘稠才会被激活。我和这个搏斗了三天了。有人能帮助我使工具栏中的链接在任何时候都是活动的吗？
有问题的链接在这个截图里..。
谢谢!任何帮助都是非常感谢的。
浏览 2提问于2016-04-14得票数 0
回答已采纳
1回答
我正在开发一个使用React的配置页面。我有一个显示在表中的可配置元素的列表，“保存”按钮被禁用并变得透明，直到数据字段被修改，此时按钮被启用，并且变得完全不透明。
但是，当按钮处于禁用状态时，这些按钮将呈现在父元素的顶部，例如粘性表标题和导航条。这一点在滚动时变得非常明显。启用按钮可以解决问题，并且不再在父元素上呈现。
目前，我正在使用react引导button组件来呈现按钮，但是使用常规的HTML按钮会产生相同的结果。看起来，无论是禁用按钮，还是独立地更改不透明字段，都会导致问题。
<td className="saveButton">
<Butt
浏览 2提问于2019-10-03得票数 0
回答已采纳
我想在Bootstrap 4导航栏上放置一些自定义图标按钮。我试着用这样的方式放置按钮：
<a class="nav-item" href="#">
<img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">
</a>
该按钮显示在导航栏上，但它在顶部对齐。我想让它居中对齐(垂直)。我尝试了所有类型的CSS样式，如页边距-顶部和填充-顶部，但它没有改变任何东西。我也试过使用
浏览 18提问于2017-06-28得票数 0
回答已采纳
我正在尝试实现当滚动UITableView时改变其透明度的UINavigationBar。在开始时，导航栏应该有透明的背景，所以它下面的内容应该是可见的(将显示一个图像，对于我使用纯色的示例)：
当用户滚动表格视图时，应将透明度替换为纯色：
表视图将包含部分标题，这应该与使用非半透明导航栏时的行为类似。标题视图一旦从底部“触摸”导航栏，就应该“粘”在导航栏上：
我没有机会尝试在iOS应用程序中实现此流程。
对于初始状态，我将UINavigationBar translucent属性设置为YES，并将backgroundColor和barTintColor都设置为c
浏览 13提问于2014-12-23得票数 18
2回答
我已经实现了导航到导航抽屉活动的导航。
private void setupActionBar() {
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
但是它不应该被打开导航抽屉的图标所覆盖。
问题：
如何将向上导航图标定位到抽屉活动旁边或工具栏右侧？
浏览 2提问于2017-05-03得票数 0
回答已采纳
我正在尝试这样做，三个分页视图在一个自定义导航栏中，带有图标，当它的视图被调出时，它会缩放。像snapchat一样制作这三种视图的最佳方式是什么?我如何将它们与导航栏中的图标联系起来？我知道我将在那些带有补充单元格的视图中使用集合视图。
我试着用3个单元格水平移动来制作一个集合视图，但我不能关联导航栏中的图标。
顺便问一下，有没有可能把导航栏做成像GIF中那样的三角形？
浏览 2提问于2016-10-25得票数 0
我有一个使用Xamarin开发的iOS应用程序。现在我正在尝试将其迁移到iOS 11。我的问题是导航栏中的BarButtonItems在任何控制器中都不可见，但它们可以正常工作，我可以轻触它们。
其中一些按钮项是在情节提要中通过将导航项添加到控制器中来设置的。这些按钮项目的标题也是不可见的。甚至是标准的后退按钮。
其他栏按钮项是由SetRightBarButtonItem或SetLeftBarButtonItem在代码中设置的。我有自定义图标按钮和系统项目按钮。系统项按钮的示例如下：
this.NavigationItem.SetLeftBarButtonItem(new UIBarButto
浏览 0提问于2017-09-21得票数 0
3回答
我正在修改一个应用程序，这个应用程序的导航栏中有一些按钮，我想通过将其拖动到层次结构中来添加另一个按钮或栏按钮项，但似乎我无法将其作为子级添加到导航栏，我想问您是否有任何解决方案，这是故事板的层次结构快照，我想添加另一个栏按钮项或另一个按钮到导航栏。
谢谢
浏览 3提问于2015-11-18得票数 11
回答已采纳
我在ios栏按钮图标上工作，我必须在正确的网站上显示两个UIBarButton图标的UIsegmented控件，但当我尝试使用界面生成器添加第二个按钮时，第一个添加的按钮get消失
视图的添加方式如下:视图->导航栏->导航项-> BarButton项->按钮
有人能帮我找到可能的解决方案吗？
浏览 3提问于2014-03-27得票数 0
1回答
iOS导航栏图标问题
、、、
我有一个关于iOS用户界面指南和导航栏的问题:我想显示一些图标，只是为了让用户知道一些参数的状态。这些图标的外观可能会根据这样的状态而改变。我已经阅读了关于导航栏的文档，它的图标看起来应该是按钮，用户可以触摸它来触发一些操作。如果导航栏中的图标仅用于用户信息，则应用程序在提交到Apple Store时会被拒绝吗？
谢谢
浏览 3提问于2013-04-09得票数 0
我想在导航栏中放置一个蓝牙图标，以显示已连接/已断开状态。
我尝试添加一个BarButtonItem，将图像设置为我的蓝牙图标，并禁用和启用此按钮。到目前为止，这个按钮运行得很好，在我看来也没问题，但我不想让这个按钮可点击，这样它就不会在点击图标时改变颜色。
这是可能的吗?或者有没有一种方法可以将UIImageView放入导航栏？
谢谢!
浏览 6提问于2019-09-06得票数 0
我想创建一个按钮下的应用程序栏(导航栏)的按钮不太大，只是正常的大小，但我不能。它需要在右上角的图标将像“类别(列表图标)”
浏览 0提问于2020-08-21得票数 0
2回答
我需要更改导航控制器中搜索栏的方向以设置为中心。我用以下代码以编程方式创建了搜索栏：
lazy var searchBar:UISearchBar = UISearchBar(frame: CGRectMake(100, 40, 440, 40))
在viewDidLoad中：
searchBar.placeholder = "Search for Places"
var leftNavBarButton = UIBarButtonItem(customView:searchBar)
self.navigationItem.leftBarBu
浏览 2提问于2016-07-26得票数 2
回答已采纳
我正在做底部导航条的功能。我有4个屏幕与底部导航栏相关联。
Page1 Index0 (它有一个按钮)Page2 Index1Page3 Index2Page4 Index3
每次单击底部图标都会更改底部导航栏的索引，并触发特定屏幕加载。
现在我想点击屏幕1的按钮，它是底部导航栏的索引0，这应该会调用load page2，就好像我选择了底部导航栏的第二个图标一样。
我尝试使用navigator.push(context，page())来加载页面，但是底部的导航栏是不可见的。这不是正确的方式，有什么方法可以正确地做到吗？
谢谢
浏览 9提问于2022-04-11得票数 1
我所有的片段都使用红色的操作栏，所以白色的导航抽屉图标看起来很不错。但是对于一个片段，我需要白色的操作栏和不可见的抽屉图标。所以我必须把抽屉图标改成红色。但我不知道该怎么做。 如何将图标更改为红色？ ?
浏览 107提问于2016-08-16得票数 1
回答已采纳
如何实现:我有一个搜索图标的UIBarButtonItem，在我点击它后，我想显示导航栏中的搜索栏，并单击取消按钮在搜索栏中，我想显示导航栏没有搜索，并与按钮和标题一样，在iOS7日历应用程序。
浏览 4提问于2014-10-25得票数 2
2回答
我有个奇怪的问题。我为我的firefox浏览器安装了flash和视频下载插件，我在导航工具栏上看到了一堆图标。我无法通过自定义选项移除这些图标。我禁用了插件，并最终完全卸载了它，但是导航栏中仍然有很多图标。下面是我的截图。
📷
任何关于如何将它移除的建议都是非常感谢的。
我有Ubuntu11.10和Firefox 7.0.1
浏览 0提问于2011-10-31得票数 1
回答已采纳
3回答
我正在尝试用x代码在我的导航栏上创建一个后退按钮。但是，当我将它从对象库拖到故事板中的导航栏时，它并没有出现。
浏览 0提问于2012-03-01得票数 1
回答已采纳
当我以编程方式设置light Navigationbar时，Statusbar的图标变为白色。那么如何将导航栏和状态栏都设置为轻量级呢？
浏览 0提问于2019-01-02得票数 0
我正在添加一个离子图标按钮到离子导航栏在一个Ionic 2应用程序。
它工作正常，但这个解决方案似乎相当冗长。
我想确认，这是正确/最简单的形式/最佳实践方法：
<ion-navbar>
<ion-title>Books</ion-title>
<ion-buttons end>
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navi
浏览 2提问于2017-07-13得票数 1
回答已采纳
我有一个带有UITabBar的视图，导航栏最初是隐藏的。当我按下下一个选项卡时，我想要显示导航栏，但是当我使用setNavigationBarHidden:执行此操作时，视图将调整大小，并且选项卡栏将被推出屏幕。如何将视图设置到不会调整大小的位置？或者适当地调整大小？
浏览 1提问于2011-07-04得票数 0
回答已采纳
我有一个登录页，在它上我有多个部分，是从导航栏菜单链接。我需要使用JavaScript来识别当前视图中的哪个部分，并突出显示导航栏中的相关按钮，然后在用户移动到另一个部分时停止突出显示该按钮。这是我当前代码的GitHub链接- ，我不知道如何才能做到这一点，提前谢谢
浏览 5提问于2021-06-13得票数 0
1回答
我正在使用引导构建一个可折叠的侧边栏，当侧边栏切换到一个迷你导航时，我试图让一个子菜单从侧边栏中弹出。
示例：
当窗口大小> 767时，单击“切换”按钮，侧边栏将缩小为一个迷你导航。然后，当您悬停在齿轮图标(设置)上时，子菜单将显示在图标右侧的侧边栏中(当您悬停图标时，可以通过向右滚动来看到这一点)。我希望这个子菜单显示在侧边栏之外。有人能帮我吗？
浏览 7提问于2015-04-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
