I'm working on creating an HTML page and I'm looking to change the up-arrow and down-arrow icons to a star and an information "i". Can anyone recommend how to

    <!DOCTYPE html>
    <html lang="en" class="no-js">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

            <meta name="description" content="" />
            <meta name="keywords" content="" />
            <meta name="author" content="" />

       <!-- rest of the HTML code goes here -->   

I want to modify the CSS code within div id="up-vote" and div id="down-vote" to display a star icon and the letter "i" which symbolizes info, instead of the default arrow icons.

[View Image Here](https://i.sstatic.net/nN64m.jpg)
htmlcssmaterialize

Answer №1

It seems that you are looking to switch the icons from arrows to stars. It appears that there is no need to modify #up-vote or #down-vote, but rather adjust the icons located within them and their corresponding attributes.

Replace 

<i class="ion-arrow-up-c"></i>
and 
<i class="ion-arrow-down-c"></i>
with: 
<i class="ion-star"></i>

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

Send the value of an li element using AJAX when clicked back to the original page

I'm currently working on passing the data-value of the < li > element that I clicked on to PHP within the same page. My approach involves using AJAX to send the data to PHP for querying purposes. While it seems like the AJAX request is functioni ...

phpjqueryhtmlajaxpost

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

phphtmlemail

Building a GWT webpage from scratch: A step-by-step guide

My project involves creating a website that features various Java tasks and informational content. Users can navigate through different pages by clicking on links from the homepage. Specifically, on the Java page, users will be able to complete tasks. Th ...

htmlgwtuibinder

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

Getting the chosen value from a dropdown menu on form submission using PHP

How to Populate a Combo Box from a Database in PHP? <td>Item Name:</td> <td><select name="items"> <option value="0" selected="selected"> Choose</option> <?php while($row = mysql_fetch_ass ...

javascriptphphtmlforms

The minimum height increases as the inner divs expand

Can you help me with the code below? html <div class="content"> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> ...

htmlcss

Is there a way to record form choices upon submission?

How can I retrieve selected options from a form upon submission? I have a basic HTML form that triggers a JavaScript function on exit. However, I am unsure of how to capture the chosen option from the <select> element. Please refer to the code snip ...

javascripthtml

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

Is BEM mandating the creation of superfluous elements?

<header> <a href="#"><img src="kitty.jpg" /></a> ... </header> In the context of organizing for BEM, take this example within the header section that is not dependent on the header block. To adhere to BEM guidelines, I op ...

htmlcssbem

Utilize Angular components in TypeScript to effectively manage errors within forms

I am currently developing a form in Angular/Typescript with more than 10 fields, and I want to streamline error management without redundancy in my HTML code. Here is an example of the form structure : <form [formGroup]="myForm"> <label&g ...

javascripthtmlangulartypescriptangular5

CSP prevents CSS Modules styling from being applied when unsafe-inline is not allowed in the style-src directive

I've developed a React application using Create React App and implemented CSS modules for styling the components. Each CSS file is prefixed with .module.css. For example: ComponentName.module.css To use the CSS file within a component, I import it l ...

cssreactjscontent-security-policycss-modules

Checking if children have certain text using jQuery

My task involves filtering an HTML table. In order to accomplish this, I have created an 'each' callback for all 'tr' elements and check if any of their children contain a specific pattern. $("#filter").keypress(function() { var fi ...

jqueryhtmlcssfilter

The Google Rich Result Testing Tool encountered an issue: Parsing error detected - a '}' or object member name is missing

Visit my website: www.bharatpharmatech.com I have implemented my code using Next.js Here is the schema I am utilizing: { "@context": "https://schema.org/", "@type": "WebSite", "name": "Bharat Pharmate ...

htmlreactjsnext.jsgoogle-search

Tips for updating the content of a DIV element on a separate page

One question that often arises is how to change the content of a div element on a different page within a website. While it is common to use Ajax to dynamically update div content within the same page by fetching data from an external .html file, the proce ...

ajaxhtmlreplace

Stretching a row in Wordpress Visual Composer and setting the direction to Right-to-Left

Whenever I attempt to expand a row using the row settings in Visual Composer, the row stretches but the alignment of the row becomes completely off. This issue only occurs when the body direction is set to direction:rtl in the CSS. You can view the websit ...

javascriptjquerycsswordpressvisual-composer

Strange behavior observed with CSS intellisense in Visual Code

While working on a ReactJS project, I noticed that when I opt for the style Jsx Attribute for inline CSS, . CSS intellisense seems to not work or only work after I manually add some fields. However, if I manually type the style attribute without using t ...

cssreactjsvisual-studio-codeintellisense

Styling <html:link> elements with CSS

I'm new to using struts and I'm struggling with applying my CSS styles to link tags. <html:link action="LoginLink" styleClass="loginButton"/> My goal is to add a button image to a link that directs to a login page. I've successfully ...

cssbuttonstrutsstruts-html

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

C++ engine for embedding HTML, CSS, and scripts

I am working on a C++ Windows native application and I'm looking for an HTML engine to help with displaying data in the GUI. After some searching, I came across Sciter, which seems like a good fit. However, I've noticed that it lacks complete CS ...

htmlc++csstwitter-bootstrapsciter

javascript function not being invoked

Currently, I have incorporated the following HTML <html> <head> <Title>EBAY Search</title> </head> <script language="JavaScript" src="ajaxlib.js"></script> <body> Click here & ...

javascripthtmlajax