attempting to position an icon directly beside a piece of text

I’m struggling to align an icon beside some text. I attempted using the :before tag, but it’s not working. Could this be because I’m utilizing Google icons? Here's the code snippet I'm trying to replicate:

.review {
  width: 317px;
  height: 25%;
}
    
.review h2 {
  color: white;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 23px;
  margin-left: 15px;
}
    
.review p {
  color: white;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  text-transform: capitalize;
  transition: 0.3s;
  /* margin: 20px; */
} 
<div class="review">
  <h2>Reviews</h2>
  <i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
  <p class="rec">Most Recent</p>
  <p>Most Relevant</p>
</div>

htmlcss

Answer №1

It's always a good idea to do a quick Google search before posting a question on SO. I found the answer to your problem in the first link that appeared in my search results, which happens to be another question on SO. You can check it out here.

To solve your issue, simply place both items inside a <div> element and apply the css class display: inline-block, just like the example below:

<div>
  <i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
  <p style="display: inline-block" class="rec">Most Recent</p>
</div>

Answer №2

Apologies for the confusion in your question, but incorporating Google icons should not pose a problem. I recommend utilizing CSS grid to address any layout concerns (given that the provided code is in HTML and CSS).

For additional guidance, consider checking out this resource: https://www.w3schools.com/css/css_grid.asp

Utilizing grid-column can be beneficial: designate two columns, with one for your image and the other for text. You may also explore grid-row for enhanced layout options.

Answer №3

Adding an icon with links can be a great way to enhance the visual appeal of your content. Make sure to place it within a paragraph tag for proper formatting.

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

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

I'm looking for suggestions on Twitter Bootstrap compatible jquery plugins that can create a Netflix-style continuously scrolling image carousel with mouse-over functionality. I've tried the carousel included in the Bootstrap JS library, but it r ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Creating a customized CSS selector to pinpoint distinct values among numerous elements sharing a common name

There are 6 buttons on the page layout, all named "Add content" and belonging to the class "addContent". In order to perform separate tasks, I need to click on each button one at a time using Webdriver. The buttons are nested deep within div's that ha ...

htmlseleniumcollectionsselenium-webdrivercss-selectors

Challenges with cascading style sheets and the integration of PHP's include function

I am currently working on a PHP website project. I have implemented the include function in my main page to include other files, but I am facing an issue with the CSS when loading the main page. The CSS in the included files seems to be all messed up, maki ...

phphtmlcss

Styling a table in CSS to have top and bottom borders

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1 ...

htmlcss

Ensure that the input button for uploading is only accessible when checked and is marked as

Most of my previous questions have been about input boxes and SQL, as I am still in the learning process. Any help is greatly appreciated. My current question revolves around displaying a button to upload an image using PHP (although for this example, I w ...

phpjavascriptjqueryhtml

Code in JavaScript that shows only a portion of the selected option in a dropdown menu

I'm just starting to learn Javascript and I'm looking to create a script for a select tag that displays countries and their phone codes. My goal is to have the dropdown menu show both the country and code, but once the user selects an option, onl ...

javascriptphphtml

Utilize the hexadecimal color code as a string within the darken function

When working with a less style, I have a string variable. @colorString: 'DADADA'; I can convert it into a color: @color: ~'#@{colorString}'; Then, I am able to use @color to define a value in a style: div { color: @color } However ...

cssless

How about incorporating AJAX into your HTML code?

I am currently in the process of developing an email system for a company that wishes to use it for sending emails. To achieve this, I have implemented a custom HTML editor for creating email content. My goal is to post the email contents to an external PH ...

phpjquerymysqlhtmlajax

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

phphtmlmysql

Arranging divs with Bootstrap version 4

Is it necessary to specify the order for each screen size breakpoint when displaying 2 divs in different orders based on the screen size? <div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1"> <div class="order-xs-1 order-sm-1 order ...

htmlbootstrap-4

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

htmlcss

Different ways to trigger code behind method with onclick excluding asp:button OnClick

I am working with asp.net and I have a form that already uses runat="server". I have added another form to the page and I need to run a method in the code behind on an onclick event. Since I already have one form on the page, I cannot use an asp:button wi ...

htmlasp.netonclick

Is it possible to create interlinked HTML pages from markdown files?

Is it possible to create documentation using multiple .md files that reference each other and then utilize a tool like Dillinger to convert these .md files into separate html pages with interlinking? For instance, can I automatically transition (via Dilli ...

htmlmarkdownmultimarkdown

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Continue the consecutive updates of rows in the history moving both backward and forward

There are two main pages in this scenario: Home.vue and Statistics.vue. On the home page, there is an interval that counts some numbers upon page load. When you switch to the "/statistics" page, the interval stops running. Upon returning to the "/" page, t ...

javascripthtmlvue.jsvue-component

Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

I have a requirement for my website to have 2 navigation bars and also 2 sets of navigation links. I would like to implement scroll-spy functionality on both navigation bars, even though only one will be visible at a time. The issue I am facing is that w ...

htmlcssbootstrap-4bootstrap-5scrollspy

Refreshing Javascript with AngularJS

I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...

javascriptjqueryhtmlangularjs

Guide to making a vertical clickable separator/line using bootstrap

Seeking advice on creating a layout where the left side consists of a sidebar menu occupying 24% and the right side contains main content taking up 75%, with a clickable vertical divider at 1% between them. When this line is clicked, the left part will hid ...

jquerycsshtmltwitter-bootstrap

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

Steps for inserting an additional header in an Angular table

https://i.stack.imgur.com/6JI4p.png I am looking to insert an additional column above the existing ones with a colspan of 4, and it needs to remain fixed like a header column. Here is the code snippet: <div class="example-container mat-elevation-z8"> ...

javascripthtmlangular