Create a stylish and unchanging Glyphicon-plus icon that maintains its color even when hovered over

Is there a technique to reduce the size of glyphicon-plus? Even though I used glyphicon-plus, the + symbol appears thick. Here is the code snippet:

<a>{href: "#/agencies/new", class: 'btn btnadd pull-right'}
<i class="glyphicon glyphicon-plus"></i></a>

This is my style snippet:

.btnadd {
border: none;
color: white;
height: 50px;
width: 50px;
border-radius: 50%;
position: fixed;
bottom: 5%;
right: 1%;
background: #60BBEA !important;
padding: 12px;
font-size: 20px;
}

Any advice on how to make the plus sign smaller? Additionally, the plus icon is white in color, but changes to black when hovered over. Is there a way to prevent this color change?

htmlcsstwitter-bootstrapiconsglyphicons

Answer №1

Update the following style

.btnadd {
    border: none;
    color: white;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 5%;
    right: 1%;
    background: #60BBEA !important;
    padding: 12px;
    font-size: 12px; /* Updated font size */
}
.btnadd:hover {
    color: #f9f9f9; /* New hover color */
}

.btnadd i{
    top: 5px;
}

Adjust the font size in .btnadd and modify the color on hover

Answer №2

Adjust the font-size to change the size of the plus icon according to your preferences.

.button-plus i {
    font-size: 16px;
}

You can use the :hover selector to customize the hover effect.

.button-plus i:hover {
    color: #ffffff;
}

Answer №3

If you want to make the plus icon appear thinner, consider applying the following CSS styles to the glyphicon-plus

.glyphicon-plus {
     font-family: none !important;
}

To prevent the color of the tick from changing upon hovering, you can simply set the :hover of the element to remain the same. This way, when hovering over the element, it will maintain its original appearance.

.btnadd:hover {
    color: #fff !important;
}

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

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

javascriptjqueryhtmlcssanimation

Customize the active text color of breadcrumbs in Bootstrap

My goal is to change the text color "About us" in the breadcrumb to black, but my attempts have been unsuccessful. <ol class="breadcrumb"> <li class="disabled"><a href="index.html">Home</a></li> <li class="active"& ...

htmlcsstwitter-bootstrapbreadcrumbs

Obtain data from jQuery Data row

I am currently working on an asp.net page where I have implemented jQuery datatables. Below is a snippet of the code: <% foreach (SubmissionSearchResult result in SearchResults) {%> <tr data-name='<%=result.ID %>'> For each r ...

javascriptjqueryhtmlasp.net

Creating and formatting HTML pages

Trying to expand my knowledge of HTML, I decided to experiment with some basic code. I selected what seemed like a straightforward layout from a website, saved the source onto my desktop, and made some slight modifications. When I opened the HTML file in a ...

htmlbrowser

A functioning <table> must have <td> capabilities that do not redirect to a URL

I can't figure out how to handle a problem with a <table> Specifically, I have a table row that contains a Redirect URL and only one table data <td> with unique functionality <table> <thead> <th></th> ...

javascripthtmljqueryasp.netmaterial-design

Steps for displaying or hiding the mobile menu when clicked

I am struggling with displaying a menu and its mobile version in HTML. The mobile menu doesn't seem to be functioning properly. Is there a way to initially show only the menu SVG icon, hide the mobile menu, and then reveal the mobile menu along with t ...

javascriptjquerycsstailwind-css

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

javascriptjqueryhtmlcsstwitter

Specify touch event regions with the ngTouch directive

I recently implemented ngTouch in my AngularJs web app to detect swipe left and right gestures. I am using this feature to open and close a side bar menu. Currently, the swipe events are linked to the entire wrapper like this <div ng-style="body_st ...

javascripthtmlangularjstouchangularjs-ng-touch

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

My objective is to retrieve data from a database, place it into an <li> element, and then highlight the larger of the two values obtained from these HTML <li> elements. I have created a jsfiddle, but I am uncertain about how to use the addCla ...

javascriptjqueryhtml

How to layer a div on top of another using CSS

I have a container div that is styled with CSS properties. When a button is clicked, I need to display a modal overlay with a message. <div class="dvLanding"> <div class="popupArea"> <span class="VoteOnce">You can only vote ...

csshtmlpositionoverlay

What is the reason for needing to close the <br> tag in XSL?

Every now and then, I work with XSLT. This means that there may be things about it that I don't fully comprehend. I'm not sure if providing an example is necessary, but here it goes: The XML is extremely simple: <a></a> XSL: <? ...

javahtmlxslttags

Using JQUERY to create a smooth sliding transition as images change

Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...

javascriptjquerycssajaxhtml

Creating my very own slider

I'm currently working on a slider and encountering a few challenges. 1) The animation on the first slide isn't functioning as expected. 2) The spacing for the last box initially appears incorrect, but adjusts as the slider progresses. 3) I&apo ...

javascriptjquerycssperformance

Arrange Image on Top of Text in Div with Text Controlling Div Height

I'm looking to stack an image on top of text inside a fixed height div. The challenge is to make the image's size based on the amount of space left after accommodating the text within the same area. Ideally, I would like to achieve this using onl ...

cssbootstrap-4

Creating new components within A-frame

I've been attempting to implement the bubble function into my scene to generate a sphere, but unfortunately nothing is showing up. Even when I try creating a sphere without using the bubble function, it still doesn't appear in the scene. func ...

javascripthtmlaframe

Incorporating an external JavaScript file into an AngularJS project

index.html: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <script src="./assets/namesController.js"></script> <body ng-app="myApp"> < ...

javascripthtmlangularjs

What is the process for executing a GET/POST request and receiving a JSON response on a webpage?

I am working on a page that has a JSON result, with both get and post methods in the controller. There are two submit buttons - one that redirects to the Post method and another that goes to the JsonResult method (named AddTableData). How can I set this up ...

c#javascriptjqueryhtmlasp.net-mvc

What is the best way to reveal a hidden div using JavaScript after a form submission?

jQuery is not a language I am very familiar with, but I am attempting to display a simple animated gif when a form is submitted. When users click 'submit' to upload an image, I want the gif to show to indicate that the image is being uploaded. Th ...

javascripthtml

Tips for customizing MUI PaperProps using styled components

I am trying to customize the width of the menu using styled components in MUI. Initially, I attempted the following: const StyledMenu = styled(Menu)` && { width: 100%; } `; However, this did not have any effect. After further research, I ...

javascriptcssreactjsmaterial-ui

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

htmlcss