The dimensions of the glyph icon placed inside a tab

http://jsfiddle.net/r9dunwzs/1/

<ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">one</a></li>
      <li>
          <a href="#profile" data-toggle="tab">
              <i class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></i>
         </a>
      </li>
</ul>

Upon examination of the provided jsFiddle, it is evident that there are issues with increasing the font size of an icon within a tab using bootstrap 3.

The expected behavior should be:

However, when attempting to modify the font size, the tabs become distorted:

Is there a way to augment the glyph-icon size without distorting the appearance of the tabs?

htmlcsstwitter-bootstrapglyphicons

Answer №1

Modify the class of the a href attribute associated with the icon and adjust the line-height of the icon.

HTML

<div class="bs-docs-example">
    <ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">one</a></li>
      <li>
          <a href="#profile" data-toggle="tab" class="bicon">
              <i class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></i>
         </a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade in active" id="home">
        1
      </div>
      <div class="tab-pane fade" id="profile">
        2
      </div>
    </div>
</div>

CSS

a.bicon{ padding: 0px 6px !important;

}

a.bicon i{ line-height: 1.45em !important;

}

VIEW DEMO HERE

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

minor issue with the background in CSS

I am trying to display two icons side by side using HTML code. Here is what I have: <head> <style> .icon_one{ width:25px; height: 20px; background:#ffffff url('icon_one.jpg') no-repeat right top; } .icon_two{ width:2 ...

css

Removing cookies after sending a beacon during the window unload event in Chrome

Here's the situation: I need to make sure that when the browser is closed or the tab is closed, the following steps are taken: Send a reliable post request to my server every time. After sending the request, delete the cookies using my synchronous fu ...

javascripthtmlreactjshttp

What are your strategies for designing a website specifically for mobile users?

Today, most modern smartphones come with 720p or 1080p resolution screens. This means that even on smaller screens, like a 4-inch display on a Galaxy s3, we can still view all the text and GUI elements (such as email textboxes) on a website when we first o ...

htmlcssmobile

Failed PHP response when jQuery was called

I'm working on a project that involves two files: one PHP and one HTML. The HTML file acts as the user interface where users input their queries, while the PHP file handles the processing and events before returning the output back to the HTML file. I ...

javascriptphpjqueryhtmlajax

Should input fields be placed inside separate columns or share a column in Bootstrap to keep them together while being right justified?

When using Bootstrap, is it better to place separate input fields inside their own col or share a col to keep them together and right-justified? I have a combo and input that I want to display on the same row at the right-hand side of the screen. If I put ...

htmlcssbootstrap-5

Can HTML5 be used to interact with a WebApi REST service?

My main query is whether it is feasible to access a WebAPI Rest services (such as a CRUD developed by myself) using HTML5? I am troubled by the fact that whenever I attempt to use an ActionResult in any WebApiController, the framework restricts me from d ...

c#htmlrestweb-servicesasp.net-web-api

Assistance Needed with XPATH and CSS for Selenium Automation

Can anyone assist me in finding the appropriate XPATH/CSS locator to extract text from the structure below? <div class="page-header song-wrap"> <div class="art solo-art"> <div class="meta-info"> <h1 class="page-title"> Zehnaseeb I ...

cssseleniumxpath

The class "pagination pagination-lg" from the link https://angular-ui.github.io/bootstrap/#/pagination seems to be malfunctioning in Bootstrap 4

Just starting out with angularjs and I'm trying to implement pagination using https://angular-ui.github.io/bootstrap/#/pagination. However, I'm facing an issue where the style class "pagination pagination-lg" is not applying properly. I'm cu ...

cssangularjsangular-ui-bootstrapbootstrap-4

Ways to access dropdown menu without causing header to move using jQuery

Greetings everyone, I am currently working on a dropdown language selection feature for my website. The issue I am facing is that when I click on the language dropdown in the header, it causes the height of the header to shift. $('.language- ...

javascriptjqueryhtmlcss

The process of locating a textarea by its id becomes obsolete when integrating CKEDITOR

The data table has editable cells, where clicking on a cell will trigger a bootstrap modal to display with a textarea containing the text retrieved from the database. Snippet of the table structure: <table class="table table-striped table-hover" id="t ...

javascriptjquerytwitter-bootstrapckeditorbootstrap-modal

The Bootstrap navigation bar fails to collapse properly

Hey there! I've incorporated Bootstrap into my web application, but I'm encountering an issue with the navigation bar. Check out my code below: <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="cont ...

jqueryhtmlcsstwitter-bootstrap

Explanation of URL in jQuery Data Template

Below is the HTML code found in a jQuery Data Template: <a class="comment" style = "text-decoration:underline" href="ItemTitle/${Application.ApplicationId}/${Application.ApplicationName}/${DomainObjectId}/${DomainObjectPropertyNameFormatted}">${Doma ...

jqueryasp.nethtmlasp.net-mvc-3

Persist the checkbox value in the database and update the status of the label accordingly

I need a checkbox for user preference selection that is stored in a MySQL database for constant availability. The label should change to "Enabled" when the checkbox is selected and vice versa. Upon saving (submitting) the page, an alert message should disp ...

javascriptphpjqueryhtml

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

javascripthtmlcss

Is it a wise choice to implement frames in AngularJS?

I am in the process of developing an AngularJS application with a three-panel main view, resembling a mail system with a navigation bar on the left. The right pane is divided into two sections; selecting an item from the navigation bar populates the top-ri ...

javascripthtmlangularjsiframe

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

javascriptjquerycss

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

I'm currently working on my HTML website and facing a layout issue. I have an image in the center of the screen, but I want to add text beside it on the right side. Every time I try to do this, the image moves down, which is frustrating. I'm not ...

htmlcss

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

Implementing Event Handlers for Multiple Textareas Using Jquery on a Webpage

The functionality of my script is exactly how I want it to be, but I am facing an issue when trying to replicate it on a page. The jQuery code manipulates textarea boxes based on button clicks, however, I now need each textarea box to have its own set of b ...

javascriptjqueryhtmlbindingtextarea

Error 404: Jquery Fancy Box Not Found

Help needed with JQuery FancyBox: I encountered a 404 error when trying to enlarge small images. Here is the code that I used: <a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/1_b.png" style="margin-right:100px;"><im ...

javascriptjquerycsshtmlfancybox