Unable to adjust the icon size within a button element using HTML

I'm struggling to increase the size of my icon inside a button. I've searched online but haven't found a solution yet. Here is the code I am currently using.

<div class="row mb-5">
  <div class="col">
    <button class="btn btn-info text-white">
      <span class=" icon-format_list_bulleted mr-1 wrap-icon larger-icon"></span>
      <br />
      Inventory
    </button>

    <button class="btn btn-info text-white">
      <span class="icon-cutlery mr-1 wrap-icon larger-icon"></span>
      <br />
      Meal
    </button>

    <button class="btn btn-info text-white">
      <span class="icon-library_books mr-1 wrap-icon larger-icon"></span>
      <br />
      Report
    </button>
  </div>
</div>

javascripthtmlcssbootstrap-4

Answer №1

The symbols are portrayed as characters in a unique font (think back to WingDings). This means they can be styled using font-related attributes like font-size, color, font-weight, line-height, etc. For instance:

.btn-info span {
  font-size:32px;
}

Consider icons as follows:

.my-icon.wrap-icon::before {
  content: "a";
  font-family: Webdings!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

Express.js - Struggling with Setting the Content-Type Response Header

While using Express.js, I am facing an issue with setting the Content-Type header. Even after specifying it as text/html, the response is being sent with application/octet-stream. Below is the snippet of my code: const express = require("express" ...

javascriptnode.jsexpress

Is there a way to showcase the generated results on a graph after the user presses the submit button?

I've been working with to generate a bar chart. Currently, when the user clicks 'submit', the input numbers are shown in a graph on http://jsfiddle.net/jx9sJ/5/. Now, I want to make some changes. I am attempting to send the input numbers t ...

javascriptphpajax

Encountering an error: Unable to execute function 'releaseConnection' on null object in MySQL with Node.js

Currently, I am utilizing the mysql felix node.js module and making use of its pool connection feature. Within my server-side code (written in node), I have numerous queries structured similarly to the example below: this.courtsAmount = function(date, c ...

javascriptmysqlnode.jsangularjsexpress

PHP code to send an HTML template via email:

When attempting to send HTML content in an email using my PHP mail code, I encountered an issue where the HTML template was not being sent along with the message. $to = $email;; $subject = 'New Order Detail&apo ...

phphtml

Issues with React's useState hook not updating properly

As a React beginner, I am facing an issue with my input field filtering functionality. The problem arises when the results are filtered and rendered, as it seems to be ignoring the last character of the input value. For instance: If I type in "s", nothing ...

javascriptreactjsaxios

Newest preact and typescript packages causing issues with type validation

Despite my efforts to integrate preact with TypeScript, I have encountered a problem where incorrect types can be passed without any error being raised. I am in the process of transitioning our codebase from plain JavaScript to preact with type scripting. ...

javascripttypescriptpreact

Perform calculations exclusively on the chosen text using a checkbox

Hey, I'm looking to calculate the total from various selected input text forms that are chosen with a checkbox, as shown below: <input type="text" value="" name="moonrock"> <input type="checkbox" value="moonon" name="moon"> Any tips on h ...

javascriptjquery

Simple method for implementing a fade effect on a React component with raw JavaScript techniques?

I am seeking a way to have my React component smoothly fade in upon being mounted. The component's outermost DIV starts with inline style display:none. Within the componentDidMount() method, I've written the following code: let el = document.que ...

javascriptfadein

Transfer all classes to a different class using jQuery

I want to create a JavaScript/jQuery code that will do the following: // if (@media (max width: 480px)) { move all elements with classes `footer--column column--menu block` to the class `footer--columns block-group` and remove the `st--footer-column` ...

javascriptjqueryhtml

The pop-up menu is obstructed by the dialog box

Within my dialog, there is a gridview that allows the user to input information. One of the textboxes within the grid has a button adjacent to it. Upon clicking this button, a menu appears with a selection of items for the user to choose from, and the sele ...

javascriptjqueryasp.net

Vue: downloading a file straight to your browser with the download attribute

I'm having an issue with axios where I am trying to download both a PDF and an image file. The image file downloads successfully and opens without any problems, but when I attempt to open the PDF file, it doesn't work as expected. downloadItem({ ...

javascriptvue.js

Struggling with creating a mock for Promise.all

In order to simulate the behavior of this function, I want to create a mock: function getMetaData(key) { var deferred = $q.defer(); var s3 = vm.initiateBucket(); var params = { Bucket: constants.BUCKET_NAME, ...

javascriptangularjsunit-testingjasmineangular-promise

I am experiencing a lack of results when attempting to run db.find() in Mongodb

Recently I delved into the realm of MongoDB, deciding to create a basic application that simply showcases data stored in my database. Check out the code snippet below: var mongoose = require("mongoose"); mongoose.connect("mongodb://localhost ...

javascriptnode.jsmongodbexpressmongoose

What is the ideal way to iterate a loop in jQuery while using setTimeout?

Currently, I'm working on a table and attempting to develop a bookmarklet that will automatically click on each row and perform some actions based on a timer. The loading time for each tab is quite long, but when I focus on just one row, the code work ...

javascriptjquery

How can we incorporate Django template tags into our jQuery/JavaScript code?

Is it possible to incorporate Django's template tags within JavaScript code? For example, utilizing {% form.as_p %} in jQuery to dynamically inject forms onto the webpage. ...

javascriptjquerydjangodjango-templates

Guide to integrating the Google identity services library in a React application

I've encountered an issue with my current code, which has suddenly stopped working: import React, { Component } from "react"; import Auth from "../../helper/auth"; import PropTypes from "prop-types"; import logo from &quo ...

javascriptreactjsoauth-2.0google-signingoogle-identity

Retrieving information from a hyperlink or input field within a list using jQuery

I'm working with the following script : <script> $().ready(function(){ $('.request_list').click(function(){ requesting_dept = $('#requesting_department_name').val(); alert(requesting_dept); $. ...

javascriptphpjquery

How can you include a key event handler that specifically looks out for the Space key being pressed?

When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...

javascripthtml

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

csspositionpositioninghtml

Refresh Material-Ui's Selection Options

Is there a way to properly re-render the <option> </option> inside a Material UI select component? My goal is to transfer data from one object array to another using the Material UI select feature. {transferData.map(data => ( <option ...

javascriptreactjstypescriptmaterial-uimap-function