Incorporating bootstrap icons into the "delete" button using button_to in Rails 3

Currently, I have an edit button displayed as:

<%= link_to edit_income_path(trans), class: "btn btn-default" do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>

I would like to add a delete button that looks identical to the edit button, with the icon class "glyphicon glyphicon-trash". However, I am struggling to find the correct syntax to achieve this. Here is my current delete button code:

<%= button_to "delete", trans, :method=> :delete, :remote=> true %>

Any guidance on how to make my delete button match the style of the edit button would be greatly appreciated.

cssruby-on-railsrubyruby-on-rails-3twitter-bootstrap

Answer №1

Does this meet your needs?

<%= button_to action, method: :delete, remote: true, class: "btn btn-default" do %>
  <span class="glyphicon glyphicon-trash"></span>
<% end %>

Answer №2

section, you can experiment with this code snippet:

give this a shot...try it out using link_to

<%= link_to (‘<i class=“fa fa-thumbs-up fa-lg”> </i>’).html_safe, vote_path(@image), :method=> :delete, :remote=> true%>

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

Find the string "s" within a div element aligned vertically, using Popper

Currently utilizing Popper from Material-UI <Popper id={"simplePopper"} open={true} style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}> <div style={{height:"100%", ...

javascriptcssreactjsmaterial-ui

The CSS3 rotation transform will rotate by an angle of n degrees

I'm currently working on a cube-like element made up of 4 divs that I am rotating using CSS3 transforms (limited to -webkit for a Chrome extension). But there's an issue, if you visit http://jsfiddle.net/CxYTg/ and click through "one", "two", "t ...

htmlcsscss-transforms

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui

Should you choose a pre-built CSS framework or create your own from scratch?

Have you come across a framework that meets your project needs with just a few tweaks, or have you forged your own path along the way? What advice do you have for someone facing this decision and focusing on priorities like: Implementing a CSS reset Refi ...

htmlcssframeworksfrontend

The dropdown menu button stubbornly remains open and refuses to close

Having an issue with a dropdown menu button where it should open when clicked on the icon and close when clicking off the icon or on the icon again, but instead, it remains open. Here is a screenshot for reference: https://i.stack.imgur.com/UX328.jpg I&a ...

javascripthtmlcss

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

javascripthtmlcssbootstrap-5

What is the best way to include a minified bootstrap file in a TypeScript project?

Instead of using react-bootstrap, I only want to add the minified CSS. I went ahead and copied the original CSS file into my project, then added the path in the index.html, but unfortunately, it's still not working. <head> <meta charset=&quo ...

csstypescriptbootstrap-4

I continually run into the error message "Uncaught ReferenceError: dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null."

I'm attempting to create a navigation bar with submenus, but I keep encountering errors such as "dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null" when hovering over the Paris links. Any thoughts on what ...

javascripthtmlcss

Utilize Z-index to hide elements from view

Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...

htmlcssz-indexcss-transitions

Table that can be scrolled through

Back in 2005, Stu Nichols shared a technique for creating a fixed header with scrolling rows in a table on this site. I'm curious if there are any newer methods or improvements to achieve the same effect, or is Stu's approach from 2005 still con ...

jquerycss

What is the best way to align an ordered or unordered list to the left in HTML?

Is there a way to align my HTML list all the way to the left without it shifting slightly to the right? My name is: 1. John 2. Jack 3. Jones I want it to look like this: My name is: 1. John 2. Jack 3. Jones Sincerely, Peter ...

htmlcss

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

htmlcssflexbox

Safari automatically zooming in on static webpages

Whenever I open my static HTML webpage on Safari, the browser automatically zooms in, causing a horizontal scrollbar for my users. This issue doesn't occur on any other browser or device. I have made sure that all text on the site is 16px or larger an ...

htmlcssiossafari

The floating labels in Bootstrap do not support clicking anywhere on the text input field

After updating from bootstrap v5.3.0 alpha1 to v5.3.0 alpha3, I noticed a change in the form-floating feature. Previously, everything worked as expected, but now there are some areas where I can't click on the input fields when the floating label is a ...

csstwitter-bootstrapbootstrap-5

Ways to verify the input text for content without activating the submit action using only JavaScript

I'm working on creating a unique input effect where the label moves up 100px when the input is focused, and then remains at the top when the user enters a value. If the input is empty and the user clicks outside, the label will return to its original ...

htmlcssbootstrap-4

Bootstrap Navigation Bar Animation causing Input Fields to be cut off

I am working with a collapsible bootstrap NavBar that contains two elements within the collapsible <div>, <form class="form-inline> and <select class="custom-select" id="menu"> (Refer to my code below) The problem I'm encountering ...

htmlcssbootstrap-4

"Combining Three.js for dynamic rendering with Bootstrap grids for responsive

Experimenting with three.js and bootstrap, I encountered an issue where the cube appears flattened when using bootstrap grids: https://i.sstatic.net/M2G4D.jpg Oddly, resizing the window fixes the problem: https://i.sstatic.net/E09BL.jpg Attempts to rem ...

javascripthtmlcsstwitter-bootstrapthree.js

tips for implementing word-breaking in css

I encountered a problem on my support ticket page where the message text was overflowing out of the designated grey container. Despite trying to utilize the "word-wrap" CSS class, the issue persisted. Here's the code snippet with placeholders for vari ...

htmlcssblazor

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Inspect and Fix the Code: Missing p tag when clicked HTML Slide up/down <div class="slideme" class="center"> <h1>Hello,</h1> <p>Can you see Me</p> </div> <but ...

jquerycsshtml

Encountered an issue with running MongoDb on MacOSX

Encountering an issue while attempting to run mongo with rails, the following error is displayed: Harshas-MacBook-Pro:~ harshamv$ mongo MongoDB shell version: 2.6.1 connecting to: test 2014-06-14T12:07:46.356+0530 warning: Failed to connect to 127.0.0.1:2 ...

ruby-on-railsmacosmongodbruby-on-rails-4homebrew