I'm attempting to position the flaticon to the right of a phone number as shown below:
<a href="tel: +000 000 000 000"><span class="icon flaticon-phone-call-1">
</span><b> +000 000 000 000</a>
I have also tried it this way:
<a href="tel: +000 000 000 000"><b> 000 000 000 000 <span class="icon
flaticon-phone-call-1"></span></a>
However, none of these methods are working and the icon keeps aligning to the left.
Have I missed any steps to make it function correctly?
It's always handy to have:
☝ +1 999 999 999
☝ <a href="https://api.whatsapp.com/send?phone=1999999999">+1 999 999 999</a>One way to accomplish this is by utilizing pseudo elements.
.phone-wrapper {
position: relative;
display: inline-block;
}
.phone-wrapper::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: " \f095";
position: absolute;
left: 100%;
margin-left: 12px;
}
<a class="phone-wrapper" href="tel: +000 000 000 000">
+000 000 000 000
This code snippet utilizes Font Awesome for the phone icon, but you can easily swap it out with another icon library or even an image.
Make sure to include the Font Awesome 5 link in the head of your HTML document before using this solution.
There seems to be an issue in your code with an unclosed <b> tag.
While you haven't provided the CSS, here's a snippet for a right-aligned flaticon that you may find helpful. The positioning of the flaticon is achieved using the background-position property in CSS. I also added font-weight:bold in the CSS to make the text bold as indicated by the <b> tag. It's recommended to set font-weight in your stylesheet rather than inserting an extra HTML tag.
Hope this explanation clears things up.
.icon {
display: inline-block;
position: relative;
border: none;
outline: none;
width: auto;
padding-right: 30px;
vertical-align: middle;
}
.flaticon-phone-call-1 {
font-weight:bold;
background-image: url("https://image.flaticon.com/icons/svg/126/126509.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center right;
}Tel: <a href="+000 000 000 000"><span class="icon flaticon-phone-call-1">+000 000 000 000</span></a>Our task was to create a project that exclusively utilized JSON files for data storage. The data structure we were working with resembles the following: [ { "aircraftName": "Boeing 747", "departDate": 1640173020000, ...
I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...
Can anyone help me figure out why I am encountering the following issue: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.6/$injector/modulerr?p0=helloKinveyApp&p1=E…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.6%2Fangular.mi ...
In the process of developing an innovative online restaurant menu editor, I have constructed a template utilizing SVG and a jpeg image as the background. Users can easily modify the text using SVG elements overlaying the template image. I have mastered th ...
Currently, I am developing an HTML5 application intended to be run on Chrome from the local filesystem. Whenever I attempt to access the filesystem, an error is thrown, possibly due to it being a local file. Is there any way to configure Chrome to allow th ...
I would like to make my Reserve Button located in the jumbotron section of my index.html file redirect to the form section when clicked. This way, when the reserve button is clicked, it will automatically scroll down to the form section at the bottom of th ...
My PHP code has a paragraph that is not being affected by my CSS style, and I can't figure out why. I'm unfamiliar with PHP, so I'd appreciate it if someone could help me troubleshoot this issue. Here's the code: <html> <style ...
Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered ...
I recently used Angular to create a list using mat-list. Here is the code I implemented: <mat-list style="display: inline-grid;"> <mat-list-item *ngFor="let item of item"> <mat-checkbox [(ngModel)] ...
Every time I attempt to click on an ASP:Button with an onclick function, the HTML5 Required attribute prevents the click from happening. I even tried implementing an ASP:UpdatePanel but that also did not solve the issue. <form id="form1" name="t ...
After some experimentation, I've managed to wrap an element inside a div using jQuery. My next challenge is to wrap it as you scroll down and unwrap it as you scroll up. Do you think this is achievable? Although I have succeeded in wrapping it while ...
I am currently using CouchDB and CouchApp to host a web application. I have experience with Django and Jinja2, where I can extend templates in two different ways: {% include "header.html" %} or {% extends "base.html" %} <<<---- my preferred me ...
There is a table with rows and a button that allows you to select a row: <table id="mytable" class="table-striped"> <tbody> <tr id="1"><td>Test1</td></tr> <tr id="2"><td>Test2</td>& ...
Exploring ways to integrate HTML5 audio events while initializing a Vue.js component that consists of a single file: <template> <audio ref="player" v-bind:src="activeStationUrl" v-if="activeStationUrl" controls autoplay></audio> < ...
Why is the height:100% property not working as expected for a child element of a flex item that also acts as a flex container with flex-grow:1? The intention was to have the child element take on the full height of its parent (the one with flex-grow:1), b ...
Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...
When it comes to my web development, I rely on Netbeans PHP and Firefox 4 on Windows. Up until recently, I have been utilizing a handy Firebug extension known as Xrefresh. This tool automatically refreshed my open Firefox tabs whenever changes were made in ...
I have encountered a challenge in my Angular form where I need to disable certain fields. The issue arises from the fact that many of the HTML tags used are customized, making it difficult to simply use the disabled attribute. To address this, I have opted ...
Take a look at the image I've attached. The text is overflowing outside the div, and I want to collapse it with a "Read more" link at the end. Users should be able to click on the "Read more" link to expand the text. I'm currently working on a p ...
I am currently working on making the header visible while scrolling down the page. I managed to achieve this by using display:block; in the CSS for the body element. However, I am facing an issue where the columns of the header are not aligned with the ...