英文:
How can I put WhatsApp number, Mail and location like this with icons?
问题
这张图片我从https://icms.edu.pk/上截取的，我想知道如何在我的页面上像这样放置WhatsApp、给我们发邮件和位置信息。有人可以帮我吗？
起初，我以为这些是图片，但它们并不是。
英文:
[my english is not that good, sorry]
This picture I snapped from https://icms.edu.pk/ I want to know how can I put these whatsapp, mail-us and location like in this on my page.
Can someone please help me out?
Firstly, I thought that these are images but they are not.
答案1
得分: 0
他们正在使用一个图标库 - www.flaticon.com
英文:
They are using an icons library - www.flaticon.com
答案2
得分: 0
请检查这个网站 https://fontawesome.com/
一旦您注册（免费），您将获得一个类似于这样的脚本：
<script src="https://kit.fontawesome.com/e1861f2b78.js" crossorigin="anonymous"></script>
将其添加到您的 head 标签中。
然后搜索您需要的图标并获取图标的链接。
您可以使用 CSS 属性自定义它，如果需要进一步的说明，请查看 Font Awesome Howto。
英文:
Check this website https://fontawesome.com/
Once you signup (it's free), you will get a script like this:
<script src="https://kit.fontawesome.com/e1861f2b78.js" crossorigin="anonymous"></script>
Add this to your head tag.
Then search for the font you need and get the link for the icon.
You can customize it using CSS properties, check out the Font Awesome Howto if you need clarification.
答案3
得分: 0
使用图标，对于电话号码，请在锚标记内使用 tel:<-- 电话号码 -->，对于电子邮件，请在锚标记内使用 mailto:<-- 邮件地址 -->，或者您可以尝试下面提到的示例：
index.html
<div class="header-contact">
<div id="phone-details" class="widget-text">
<i class="fa-brands fa-whatsapp"></i>
<div class="info-text">
<a href="tel:+92 333-9119145">
<span>WhatsApp</span> +92 333-9119145
</a>
</div>
</div>
</div>
这是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;
}
还可以在这里使用fontawesome图标。
英文:
use icons and for phone number use tel:<-- phone number --> inside the anchor tag and for mail use mailto:<-- mail id --> inside the anchor tag
or you can try the example mentioned below:
index.html
<div class="header-contact">
<div id="phone-details" class="widget-text">
<i class="fa-brands fa-whatsapp"></i>
<div class="info-text">
<a href="tel:+92 333-9119145">
<span>WhatsApp</span> +92 333-9119145
</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;
}
and one more here I can use a fontawesome icons
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论