Center and resize icons with AngularJs

I am currently working on a grid menu design, as shown below. I am facing an issue where I am unsure how to resize the icons dynamically using AngularJs instead of jQuery. Additionally, I need assistance on centering the icons within the grid. Thank you for your support :)

https://i.sstatic.net/KOzf8.png

menu.html

<ion-content id="my_page">
    <div class="my_row">
        <a class="my_item" href="#/map">
            <i class="icon menu_icon ion-android-walk"></i>
        </a>
        <a class="my_item" href="#/search">
            <i class="icon menu_icon ion-android-search"></i>
        </a>
    </div>

    <div class="my_row">
        <a class="my_item" href="#/">
            <i class="icon menu_icon ion-android-create"></i>
        </a>
        <a class="my_item" href="#/">
            <i class="icon menu_icon ion-android-settings"></i>
        </a>
    </div>
</ion-content>

css

.my_container{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
}

.my_row{
    height:49.95%;
    left:0;
    right:0;
    background-color:#ffffff;
    clear:both;
}

.my_item{
    height:100%;
    width:49.95%;
    background-color:#c0b5b5;
    border: 1px solid #ffffff;
    float: left;  
    vertical-align: middle;  //dont work :(
    text-align: center; 
}

i.menu_icon {
   font-size: xx-large; //Here i want it to fit, not a final size, but dynamicly
}
cssionic-framework

Answer №1

Consider using:

i.menu_icon {
   font-size: 250%;
}

In the code above, the font-size of 250% is based on the em size, not the parent container's height. To center them vertically, you can apply the following:

i.menu_icon {
  font-size: 250%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Lastly, remember to set the parent element as position: relative:

.my_row {
  height:49.95%;
  left:0;
  right:0;
  background-color:#ffffff;
  clear:both;
  position: relative;
}

Answer №2

Do you really need to use angular code for this task? Perhaps utilizing CSS would be a better option.

If you want to adjust the size of your icons, consider using the width and height properties, or try adjusting the spacing with padding. To align your icons, you can also experiment with padding and margins. Another approach is to apply position: relative to the icon and adjust the top value accordingly.

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

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

Resize image to fit within a div using Bootstrap

I'm attempting to resize some images to fit into horizontal cards created with Bootstrap-5, but I'm having trouble filling up the div completely. I've been using a main.scss file to manage the Bootstrap CSS and have tried using classes like ...

csssassbootstrap-5cardhorizontal-card

CSS slideshow animation is not functioning properly

Hey there, I'm new around here and I've got a question for you all. Please bear with me if I make any mistakes. So, I'm attempting to create a simple CSS slide image. In my animation code, I want the picture to fade from the left every time ...

css

Encountered an error: Uncaught TypeError - Unable to access the 'format' property of an undefined object at the specified time

I encountered an issue with the following line of code let FullDate = moment(1499153561479).add(currentSeconds, 'seconds').tz(citiesT[id]).format("DD-MM-YYYY HH:mm:ss a"); Any suggestions on how to resolve this error? ...

javascriptcsstimemomentjs

Issue with Materialize CSS 'select' not functioning correctly when integrated with Django framework

I am working with a template that gathers all the names of authors from the author_info model. These names are displayed in a dropdown list. However, when I pass the selected value to the view, it ends up displaying null. Here is the template code: <se ...

pythoncssdjangomaterialize

Bootstrap does not support horizontal alignment of columns

I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this? As far as I know, col-md-6 should divide the page into 2 colu ...

htmlcssbootstrap-4

"My drop down button menus and background image seem to be experiencing some technical difficulties. Can someone help

I'm having trouble getting a drop-down menu to work with a reptile image as the background. When I remove the image, the drop-down works fine. I've checked for errors but can't seem to find any. Is it an issue with the code or maybe a typing ...

htmlcss

Sending a responsive email through Outlook can cause issues with the 100% width tables

After using a boilerplate to create a responsive email that looks good across devices, there seems to be an issue with Gmail on Android. However, you can't always have everything perfect. When forwarding the email in Outlook 2007 or 2010, the table b ...

htmlcssemailresponsive-designhtml-email

Vertical menu causing problem with smooth scrolling link effect

Currently, I am facing an issue with a template and trying to resolve it. The problem lies with the highlighting effect on the navigation menu, which only seems to work on a reduced browser height. When I resize the window to full screen and scroll down to ...

javascripthtmlcssbootstrap-4smooth-scrolling

Is it possible to edit multiple classes simultaneously in Bootstrap?

After creating a div with the class container and adding 50px padding to the top, I am now ready to add another container using Bootstrap's CSS. Do I need to create a new class like container-2 to edit the new container's style or are there multi ...

htmlcssbootstrap-4

Implementing hover effects on text styling

I'm currently working on a website and encountering a roadblock. I need to add text decoration to specific text elements, but here's the structure: Here is how it looks: <div class="wrapper"> <a href="#"> ...

htmlcss

Best practices for resolving classlist.toggle issues with my dark mode button

The code seems to work only the first time, but after activating light mode again, the sun stops appearing. How can I ensure that the 'bi-sun' class is added back every other click or when dark mode is not activated? function theme() { do ...

javascripthtmlcsssveltekit

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

javascriptjquerycsstooltip

Unable to retrieve data following a promise in Ionic 3

Hello, I'm currently working on an Ionic application that needs to display data in a Form Group after retrieving it with a SOAP ReadData request. Although I call my function and try to display the data in the form, there seems to be an issue as the f ...

typescriptionic-frameworkionic3

Customizing error styles in a table using Jquery validation

My form is using JQuery .validation(). Here is the structure of my form: <form....> <table cellspacing="0" cellpadding="0"> <tr> <td>Name: </td> <td><input type='text' name='Name'/></td> ...

javascriptjqueryhtmlcss

What could be causing my css stylesheet to not function properly in Sinatra?

I'm fairly new to this, but based on my research, this code should be functioning correctly. I am attempting to link a CSS stylesheet to an .erb file. Here is the code snippet I am using: <link rel="stylesheet" type="text/css" h ...

htmlcssrubysinatra

how to dynamically add classes in jsx with a combination of tailwind and regular classes

Why is it that in Nextjs 14 (ReactJS 18), when I conditionally assign css classes within a jsx code like this: <Swiper className={lightbox ? "swiperLightbox h-[80%] md:h-[70vh] z-50" : "swiperMain h-[21vmax] rounded-xl"} > ...

cssreactjsnext.jsjsxtailwind-css

Is there a way to create 3 divs in the first row and 2 divs in the second row?

How do I create 3 divs in the first row and 2 divs in the second row? This is what it currently looks like: This is the desired output: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= ...

htmlcssbootstrap-4

Position one div-tag underneath another div-tag

Is there a way to position one divtag below another divtag? I am looking to create a list at the bottom ...

htmlcss

Transitioning from the login screen to the main page in Ionic with the help of Angular

My code is running smoothly, but I encountered an issue when clicking the login button. It changes the state as depicted in the image, altering the URL but failing to open the subsequent page. Can anyone provide guidance on how to redirect to the next page ...

javascriptangularjsionic-frameworkionic-view