Icon inside HTML data-text attribute

Asked

Viewed 168 times

3

The doubt may be silly but I really don’t know how to do it. It is possible to escape an awesomefonts icon (already installed in the project) inside an HTML attribute, in this case the data-text?

Follow CSS/HTML, thank you all!

.primary-bg{
    width: 237px;
    margin: 5px 5px;
    /* Secondary color */
    background-color: rgb(27, 99, 245);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display: inline-block;
}
.btn
{
    line-height: 55px;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}
.btn1 {

    color: rgba(255,255,255);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    /* Primary color */
    background-color: rgb(29, 85, 148);
}
.btn1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.btn1 span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: rgba(255,255,255,0.2);
    width: 100%;
}
.btn1:hover > span{
    opacity: 0;
    -webkit-transform: translate(0px,40px);
    transform: translate(0px,40px);
}
.btn1::after{
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;   
}
.btn1:hover::after{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
<div class="primary-bg">
  <div class="btn btn1" data-text="Icone+TextoAqui"><span>Ícone após o hover</span></div>
</div>

html html5 css3

1 answer

1


Yes it is possible, just do the following:

Sets the source property:

font-family: 'FontAwesome';

In the attribute put in front of the text the Unicode code referring to the icon.

data-text="&#xf0e0 Icone+TextoAqui"

Complete list on the page Cheatsheet, recalling that the code is preceded by &#x.

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");


.primary-bg{
    width: 237px;
    margin: 5px 5px;
    /* Secondary color */
    background-color: rgb(27, 99, 245);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display: inline-block;
}
.btn
{
    line-height: 55px;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}
.btn1 {

    color: rgba(255,255,255);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    /* Primary color */
    background-color: rgb(29, 85, 148);
}
.btn1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.btn1 span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: rgba(255,255,255,0.2);
    width: 100%;
}
.btn1:hover > span{
    opacity: 0;
    -webkit-transform: translate(0px,40px);
    transform: translate(0px,40px);
}
.btn1::after{
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;   
}
.btn1:hover::after{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.btn1 {
  font-family: 'FontAwesome';
}
<div class="primary-bg">
    <div class="btn btn1" data-text="&#xf0e0 Icone+TextoAqui"><span>Ícone após o hover</span></div>
</div>

EDIT

To increase the font only of the icon

Defines the property:

.btn1::after {
    /* Defina a margin para separar o icon do texto */
    margin-left: 20px;
}
.btn1:hover::before {
    content: attr(data-icon);
    font-family: 'FontAwesome';
    font-size: 24px;
}

Create date attribute with the Unicode code for the icon.

data-icon="&#xf0e0"

Example

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");


.primary-bg{
    width: 237px;
    margin: 5px 5px;
    /* Secondary color */
    background-color: rgb(27, 99, 245);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display: inline-block;
}
.btn
{
    line-height: 55px;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}
.btn1 {

    color: rgba(255,255,255);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    /* Primary color */
    background-color: rgb(29, 85, 148);
}
.btn1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.btn1 span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: rgba(255,255,255,0.2);
    width: 100%;
}
.btn1:hover > span{
    opacity: 0;
    -webkit-transform: translate(0px,40px);
    transform: translate(0px,40px);
}
.btn1::after{
    /* Defina a margin para separar o icon do texto */
    margin-left: 20px;
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.btn1:hover::after{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.btn1:hover::before {
  content: attr(data-icon);
  font-family: 'FontAwesome';
  font-size: 24px;
}
<div class="primary-bg">
    <div class="btn btn1" data-icon="&#xf0e0" data-text="Icone+TextoAqui"><span>Ícone após o hover</span></div>
</div>

  • Thanks for the answer, it worked for me, but only when I use the Cdn you put at the beginning of css. When I put the tags <i class="fas fa-search"></i> get the icon normally. Could you tell me what happens?

  • When I put the tags <i class="fas fa-search"></i> anywhere on my page I get the icon, which means I’m correctly importing the file from awesome sources with the tags <link rel="stylesheet" href="css/fontawesome-all.min.css">

  • It works! What doesn’t work is Unicode(&#xf002) when I withdraw Cdn.

  • I am using the 5.0 but I believe that is not the problem because I downloaded and imported the one you used and the problem continues. Is it because I’m using it on localhost? I use laragon as a server for projects.

  • The problem is in version 5, does not accept Unicode. I downloaded the 4.7 of the site with the css/fonts folders and it worked perfectly. I didn’t understand the reason why it doesn’t work Unicode with 5, I’ll take a look at the release later. I appreciate the strength. God Bless!

  • Not wanting to ask a lot but already asking, would you know how to give a font-size in that Nicode? With pseudo element I can but this is inside an attr in the case.

  • Yes, I’ve done it, but what I want to do is just increase the icon.

  • Solved for me, thank you very much. God Bless!

Show 3 more comments

Browser other questions tagged html html5 css3

You are not signed in. Login or sign up in order to post.