[Apologies for my English not being perfect] I came across this image on and I'm curious about how to add similar WhatsApp, email, and location buttons on my own website. Can anyone assist me with this?
Initially, I mistook these elements for images but later realized they were not.
Utilize icons and for contact number, include tel:<-- phone number --> within the anchor tag. Similarly, for email address, use mailto:<-- mail id --> inside the anchor tag.
Alternatively, you can refer to the example provided below:
index.html
<div class="header-contact">
<div id="phone-details" class="widget-text">
<i class="fa-brands fa-phone"></i>
<div class="info-text">
<a href="tel:+1 123-456-7890">
<span>Call</span> +1 123-456-7890
</a>
</div>
</div>
</div>
And here is style.css
.header-contact .widget-text {
position: relative;
padding-left: 55px;
}
.header-contact .widget-text i {
position: absolute;
border-radius: 2px;
text-align: center;
left: 0;
line-height: 40px;
color: #003e78;
font-size: 35px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
font-weight: 700;
}
.header-contact .widget-text .info-text a {
color: #505050;
font-weight: 400;
font-size: 16px;
}
a {
color: #D6F8D6;
transition: all 0.3s ease 0s;
text-decoration: none !important;
outline: none !important;
}
.header-contact .widget-text .info-text span {
display: block;
font-weight: 700;
color: #101010;
line-height: 18px;
}
Additionally, you can incorporate fontawesome icons
The website being utilized for icons is found at www.flaticon.com
Visit this amazing website https://fontawesome.com/
After signing up for free, you will receive a script similar to this:
<script src="https://kit.fontawesome.com/e1861f2b78.js" crossorigin="anonymous"></script>
Insert this into your head tag of your webpage.
Next, locate the font you desire and obtain the link for the icon.
You have the option to customize it using CSS styles, refer to the Font Awesome Howto for further details.
I am encountering an issue within my Node.js application. When I send an http get request through an ajax call on the client-side, the server-side does not recognize the request data and returns an "undefined" error message. This problem is puzzling to me ...
Behold, I present to you what I have: CODE In a moment of curiosity, I embarked on creating a script that rearranges numbers in an array in every conceivable way. The initial method I am working with is the "Selection mode", where the lowest value in th ...
REVISE I recently switched my dataType from DateTime to TimeSpan in my code. I have a functioning MVC version that already uses TimeSpan, and the times are posted in HH:MM format. Now, I am unsure if the issue lies with the headers set up on Axios or if it ...
Struggling to grasp the concept of directives and encountering a bug along the way. To see my example in action, check out the codepen I've created here In my scope called "movies," I have 3 movie titles that I want to display using a directive. va ...
Can someone help me figure out why all my buttons are getting disabled when I only want one to be disabled? Here is the code where I created a counter with vue.js: <body> <div id="app"> <button @click="co ...
I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...
There is a unique custom my-table element that has its row property bound to the host component. There are two different ways in which HTML can be inserted: <my-table [rows]="displayEntriesCount"></my-table> and alternatively: <my-table r ...
I'm sending information to my FlatList through the following code snippet: <FlatList data={pubData} renderItem={({ item }) => ( <Item id={item.id} name={item.name} lat={item.lat} long={item.long} deviceL ...
In my chat application built with React, I am facing an issue where if a user types more than 100 characters, the message gets cut off. How can I fix this problem? Please refer to the image below for reference. https://i.sstatic.net/DLNyH.png {Object.keys ...
There seems to be a jQuery function in my code that is adding the string: jQuery15206649508478338135_1314906667378 to user-provided feedback. This issue is occurring across multiple forms and it is being stored in the database, much to the frustration of ...
I've been attempting to send a JSON object to a servlet using AJAX, but I'm running into an issue where the object is showing up as null in the servlet. Can't seem to pinpoint the problem in this code. JAVASCRIPT function submitValues(even ...
Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...
Just completed a 5-page sliding site, each page featuring an image slider. Utilizing an image slider within a page slider. However, when attempting to use the same image slider with different images for page slide 3, it's not functioning. Any assista ...
Can you help me with a question I have? I was informed that utilizing code like the following is not recommended for creating accessible HTML: <span class="fa-stack fa-lg"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-c ...
Utilizing the Tooltip component from MUI within my custom TooltipComponent has been an interesting experience. Much like a Dialog, users can trigger content to appear by clicking on an element (in this case, a div with the text "CLICK"). This popup content ...
Hey there! I'm facing an issue with a gif running as the background on my website. On my phone, the whole screen isn't filled up and there's just a black space halfway down. You can check it out at . Do you know how to make the gif take up t ...
I have a collection of objects and I need to search for instances where certain properties match specific values. Here is an example array: let arr = [ { a: 'foo', b: 'bar' }, { a: 'bar', ...
Looking to extract all values of a specific property and save them as an array. I attempted the following method: data() { return { roomList: null } }, methods: { getRooms() { var that = this axios.get('http://local ...
{ // Let's figure out how to launch my HTML file as a webpage in Chrome. "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", &q ...
Currently, I am attempting to filter results by dates using daterangefilter. However, I am experiencing issues with my datepicker functionality. Although the icon appears, the datepicker itself is not functioning as expected. In an effort to troubleshoot ...