Bootstrap glyphicon arrow down not showing

HTML & CSS
1

Its possible Im missing a file that I need to download from NuGet but I’m not sure.

I’m trying to use the arrow down icon and nothing shows.

        <div class="card-header">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#clpCategory@(Model.ID)" aria-expanded="false" aria-controls="clpCategory@(Model.ID)">
                    @Model.CategoryName <span class="glyphicon glyphicon-arrow-down"></span>
                </button>
            </h5>
        </div>
2

Hi there multichild,

do you have the GLYPHICONS fonts?
Do you actually want them all or just the one?

coothead

3

ye this is what I’m wondering, and I only need the up and down arrow. I’m looking in my contents folder and cant see any files related to glyphicons. I’m using bootstrap 4

4

Hi there multichild,

give me a little while and and I will get the arrows for you. :sunglasses:

coothead

5

Hi there multichild,

check out the attachment to find the relevant files and a basic example. :winky:

up-and-down-arrows.zip (2.5 KB)

coothead

2 Likes
6

Bootstrap4 doesn’t use glyphicons anymore and if you want other options you can find them listed here.

7

So does the accordion action of changing the up and down arrow on click still work, or do I need to build all that in possibly using jscript.

Struggling also to get that span to be on the same line as the button text

The source for that area looks like this

<div class="card-header">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#clpCategory2" aria-expanded="false" aria-controls="clpCategory2">
                    First Category <span class="glyphicon glyphicon-arrow-down">1</span>
                </button>
            </h5>
        </div>
8

Thanks coothead, Im taking a look now

9

You have to add that in yourself but if you use devtools you can see that there are hooks already in place to use so you don’t need any js as such.

I would do something like this which is built straight drom the accordion demo on bootstrap plus a little css of my own for the arrows.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>

    <style>
        #accordion .btn-link {
            position: relative;
            padding-right: 2em;
            display: block;
            width: 100%;
        }
        
        #accordion .btn-link:after {
            content: "";
            position: absolute;
            right: 14px;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 14px;
            height: 14px;
            border: 3px solid #666;
            border-right: none;
            border-bottom: none;
            transform: rotate(45deg);
            transition: all .5s ease;
        }
        
        #accordion .btn-link[aria-expanded="true"]:after {
            transform: rotate(225deg);
        }
    </style>

</head>

<body>



    <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
1 Like
10

Oh Paul, that has absolutely nailed it, its perfect, thanks again

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.